Thymeleaf layouts are resolved and works fine for simple urls.
Ex: www.abc.com/users
However, that's not the case for nested urls
Ex: www.abc.com/advisor/building
I am not sure if this is a thymeleaf or spring-boot issue.
Here is my layout file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">My App</title>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<div id="container">
<div id="pageContent">
<div layout:fragment="content"></div>
</div>
</div>
<div th:replace="fragments/footer :: footer"></div>
</body>
</html>
And this is the content that is supposed to be decorated
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
layout:decorator="layouts/default">
<head>
<title>General Building</title>
</head>
<div layout:fragment="content">
<div class="page-header">
<h3>Test</h3>
</div>
</div>
</html>
Related
In the Following the '#yield' function is not working,It is showing as normal words not like blade function keywords
#yield('content')
</div>
#yield('footer')
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Admin | #yield('title')</title>
<!--Has all the sylesheets attached already!-->
#include('Elements/_head')
<!--Custom CSS or CSS Files for particular page-->
#yield('styles')
</head>
<body class="hold-transition skin-blue sidebar-mini" onload="startTime()">
<div class="wrapper">
<!--Application Header-->
#include('Elements/_header')
<!--Application Sidebar-->
#include('Elements/_side')
<!--Page Content Main-->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
#yield('title')
<small></small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<img id="loader" src="{{url::asset('images/loading.gif')}}">
#yield('content')
</section>
</div>
<!--Footer of Application-->
#include('Elements/_footer')
</div>
<!--Has all the scripts already attached-->
#include('Elements/_base')
<!--Custom scripts for particular pages-->
#yield('scripts')
</body>
</html>
I have a laravel application.
I am using bootstrap in the frontend alongwith blade templates.
I want to add a background image to my landing page.
I am trying to style the page by putting a background image to the body. But its not working as in the image is not showing
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
</head>
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
</body>
</html>
In My chrome console i don't see any error of not loading the image.
The code for content section
#extends('layouts.master')
#section('content')
<div class="row">
<div class="col-md-12">
<h3>Welcome to your neighourbood Gym</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Plans</h1>
<p>Plans available in our gym!</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Gallery</h1>
<p>Have a look around our gym</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Contact us</h1>
<p>Click for more details</p>
</div>
</div>
#endsection
Best Regards,
Saurav
Given the following folder structure:
`/public/images/gym_background.jpg`
Change this:
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
To this:
<style>
body {
// Add a . in front to look in the right folder + dropping the double {{ }}
background-image: url('./images/gym_background.jpg');
}
</style>
Here is a good read on relative vs absolute paths for the extra curious.
If you don't see the image and there's no 404 error in the network inspector, then probably your image is hidden under some other element that takes all the screen and has solid (white?) background. Try setting the same CSS on div.container, then it should work.
UPD: Scratch that, the problem is curly braces. It will work if you remove those {{ and }}.
I decided to try Bootstrap 4. I have rather a simple HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<header class="container-fluid">
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col-1">
</div>
<div class="col-10">
</div>
<div class="col-1">
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
But when I hover the latest col-1 element in the developer tools, the horizontal scrollbar appears. Look at the image below.
Firefox bug
Who have any ideas how to wrastle with it?
your code is okay
I tried it in Google chrome, and the horizontal scrollbar doesn't appear
also I download firefox and installed it, then tried what you made, and there is no horizontal scrollbar as well
You may have an error in your firefox, you may download the new version from here;
https://www.mozilla.org/en-US/firefox/new/
While loading a view all assets are wrongly transferred with a MIME type text/html
So on the console I see:
Resource interpreted as Script but transferred with MIME type text/html: "http://trivia.dev/guest". guest:11
Resource interpreted as Image but transferred with MIME type text/html: "http://trivia.dev/guest". guest:71
Uncaught SyntaxError: Unexpected token <
The syntax error is on the first line of the html file, which means that it is read as a script, instead of HTML. For some reason this only occurs when I am pulling a script in my HTML.
My master layout:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>#yield('title') | Royal Trivia</title>
<link rel="icon" href="{{URL::to('img/favicon.png')}}">
<link rel="stylesheet" href="{{URL::to('css/style.css')}}">
<script src="{{URL::to('js/bundle.min.js')}}"></script>
</head>
<body>
<div class="flash">{{Session::get('flash_message')}}</div>
#yield('content')
</body>
</html>
Generated HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>שחק וזכה | Royal Trivia</title>
<link rel="icon" href="http://trivia.dev/img/favicon.png">
<link rel="stylesheet" href="http://trivia.dev/css/style.css">
<script src="http://trivia.dev/js/bundle.min.js"></script>
</head>
<body>
<div class="flash"></div>
<header>
<div class="container">
<ul class="lang-icons">
<li><img src="" alt="hebrew"/></li>
<li><img src="" alt="english"/></li>
<li><img src="" alt="spanish"/></li>
</ul> <!--lang-icons-->
<a class="logo" href="/">
<img src="http://trivia.dev/img/mobile/logo.png" alt="RoyalTrivia"/>
</a><!--logo-->
<div class="users-count">
<small>כרגע באתר 1000 משתמשים</small>
</div>
</div><!--container-->
</header><div class="cta-strip">
<div class="container">
<img class=mobile src="http://trivia.dev/img/mobile/login_image.png" alt="people"/>
<div class="cta-text">
<h1>משחק הטריוויה שמטריף את כולם</h1>
<h4>הידע שלכם שווה כסף</h4>
<h5>ענו על 3 שאלות טריוויה</h5>
<h5>אם עניתם נכון ומהר יותר מהמתחרה מולכם - זכיתם</h5>
<h3>בואו להרוויח כסף</h3>
</div> <!--cta-text--> </div> <!--container-->
</div> <!--cta-strip--><div class="buttons-strip">
<div class="container">
<div class="cta-text">
<h1>משחק הטריוויה שמטריף את כולם</h1>
<h4>הידע שלכם שווה כסף</h4>
<h5>ענו על 3 שאלות טריוויה</h5>
<h5>אם עניתם נכון ומהר יותר מהמתחרה מולכם - זכיתם</h5>
<h3>בואו להרוויח כסף</h3>
</div> <!--cta-text--> <div class="CTA-btns">
<div class="login-btn clearfix">
<small>משתמש רשום?</small>
<a class="star-btn login-link" href="#/login"><span>כניסה</span></a>
</div><!--login-btn-->
<div class="signup-btn clearfix">
<small>לא רשום?</small>
<a class="star-btn signup-link" href="#/signup"><span>הרשמה</span></a>
</div><!--signup-btn-->
</div><!--CTA-btns-->
</div><!--container-->
</div><!--buttons-strip--><footer>
<div class="container">
<ul class="social-icons">
<li><a href='facebook.com'><img src='someimage.png' alt='email'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt=''/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='youtube'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='google+'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='twitter'/></a></li>
<li><a href='facebook.com'><img src='someimage.png' alt='facebook'/></a></li>
</ul>
<p>© All rights reserved to Royal Trivia</p>
</div><!--container-->
</footer>
</body>
</html>
I found the problem thanks to #Unnawut's advice: The file name was incorrect (should have been bundle.js).
The weird thing was that I didn't get a 404, but was redirected to the /guest route which caused the MIME-type error and the syntax error.
I've looked through my files and found a 404 handler that redirected back to the homepage.
I have http://chessresearcher.com/test-02.html which should load http://chessresearcher.com/hello.html as a modal, but it doesn't display it! What am I doing wrong? I have kept the code to bare minimum. The code source is http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url which works.
http://chessresearcher.com/test-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Modals with Remote URL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$('#button_id').click(function(){
$('#myModal').modal('show')
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<!-- Content will be loaded here from a remote source -->
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</body>
</html>
and: http://chessresearcher.com/hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
The problem is the combination of angular ui and bootstrap 3. I can't find the link that solved the problem for me, but the solution was to add this css:
.modal {
display: block;
height: 0;
overflow: visible;
}
See also this link.