Im working with Spring Boot and Thymeleaf as simple front end. Im very low in front end and i know just basics about thymleaf and html/css. I build simple forum where after login, user got few pages like, add topic, find topic, topic list, add inscription, edit inscription etc. I want to have this same navbar for every page. On this moment i just copy still this same html code and paste to every file, but what if i want to change one option?Yeees i know, i will have to change on every file. How can i fix it and put one navbar with this options to every page after login? I add for example my index.
<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link th:href="#{/main.css}" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #969bd9;">
<span class="navbar-brand">Home Page</span>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="isAuthenticated()"><a th:href="#{/logout}">Logout</a></li>
</ul>
<ul class="nav navbar-nav">
<li sec:authorize="isAuthenticated()"><a th:href="#{/topic/all}"><n1>Topics</n1></a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Welcome <span sec:authentication="principal.username"> </span></h1>
</div>
<div class="container my-2">
<a th:href="#{/newTopic}" class="btn btn-success">Create new topic</a>
</div>
<div class="container my-3">
<a th:href="#{/topic/search}" class="btn btn-success">Find topic</a>
</div>
<div align="center" class="container my-2">
<h3>Last activity</h3>
<table border="1" style="width:800px" class="table table-bordered table-striped">
<thead>
<tr>
<th>Topic name</th>
<th>Date activity</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<tr th:each="inscription : ${newInscriptionList}">
<td>
<a th:href="#{/topic/{id}(id = ${inscription.topic.id})}" th:text="${inscription.topic.title}"></a>
</td>
<td th:width="200" th:text="${#dates.format(inscription.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
<td th:width="200" th:text="${inscription.user.login}"></td>
</tr>
</tbody>
</table>
</div>
<div align="center" class="container my-2">
<h3>New Topics</h3>
<table border="1" style="width:800px" class="table table-bordered table-striped">
<thead>
<tr>
<th>Topic name</th>
<th>Created</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<tr th:each="topic : ${newTopicList}">
<td>
<a th:href="#{/topic/{id}(id = ${topic.id})}" th:text="${topic.title}"></a>
</td>
<td th:width="200" th:text="${#dates.format(topic.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
<td th:width="200" th:text="${topic.user.login}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So for example i want to get this nav bar to every page.
<nav class="navbar navbar-light" style="background-color: #969bd9;">
<span class="navbar-brand">Home Page</span>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="isAuthenticated()"><a th:href="#{/logout}">Logout</a></li>
</ul>
<ul class="nav navbar-nav">
<li sec:authorize="isAuthenticated()"><a th:href="#{/topic/all}"><n1>Topics</n1></a></li>
</ul>
</div>
</nav>
The answer is yes. You can simply do this with Thymleaf.
At first, make a file called navbar.html
Then insert your navbar code in there like this
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>NavigationBar</title>
</head>
<body>
<nav th:fragment="navbar" class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" th:href="#{/}">Student Management System</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" th:href="#{/student}">Student List</a></li>
<li><a class="nav-link" th:href="#{/subjects}">Subjects</a></li>
<li><a class="nav-link" th:href="#{/teachers}">Teachers</a></li>
</ul>
</div>
</nav>
</body>
</html>
Then whenever you want, you can simply use it as follows. Use the following format for that in the div element.
th:insert="File_Name : : Fragment_Name"
You can get a better understanding from the following example.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Create New Student</title>
<link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>
<body>
<div th:insert="navbar :: navbar"> </div>
<div>
<h1> Student Form </h1>
</div>
</body>
</html>
Related
I am trying to create a page with a collapsible sidebar on the left and a content are that occupies the rest of the page. In my content area I want a navbar up on top and the rest of the content below.
Currently, I am using a container-fluid class to make sure the navbar resizes. When I have a regular paragraph encapsulated in <p> tag the navbar and the paragraph spans the full width of the page. However, the moment I use row's and col's the content seems to take up only have the page and does not go to the edges.
Here is my html code:
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn navbar-btn">
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>username</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<!-- I have a few divs here -->
</div>
<div class="col-md-9">
<!-- I have a fre more divs here -->
</div>
</div><!-- row -->
</div>
I am currently using Bootstrap 3 (3.3.7) and was following along with this tutorial. I know there are a few other questions on Stack Overflow, but none of the solutions there seems to do anything to solve my problem.
Thanks for any help.
I think you expecting this. if it's not your expectation please add fiddler snippet here, I will update code.
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
<!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">
<!-- Latest compiled and minified CSS -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootstrapious.com/tutorial/sidebar/style2.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>Download source</li>
<li>Back to article</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content" class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<div style="background-color: #324D5C; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-3 -->
<div class="col-md-9">
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px;">
<p><b style="color: #fff;">Upcomming</b></p>
<h1 style="color: #46B29D; text-align: right;">50</h1>
</div>
<br>
<div style="background-color: #46B29D; padding: 25px; border-radius: 5px; ">
<p><b style="color: #fff;">Total Created</b></p>
<h1 style="color: #F0CA4D; text-align: right;">120</h1>
</div>
<br>
<div style="background-color: #F0CA4D; padding: 25px; border-radius: 5px;">
<p><b style="color: #E37B40;">Avgerage Value</b></p>
<h1 style="color: #324D5C; text-align: right;">$400</h1>
</div>
<br>
</div> <!-- col-md-9 -->
</div><!-- row -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>
I'm quite new to spring framework, I'm trying to create a template using thymeleaf and Twitter bootstrap to displace a page showing a table of items using JPA. My problem is I'm unable to show the page. Attached here is a screenshot of the error.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="icon" href="../../favicon.ico">
<title>Items</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<linkhref="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/dashboard/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Inventory System</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Welcome <span class="sr-only">(current)</span></li>
<li>Items</li>
</ul>
<ul class="nav nav-sidebar">
<li>New item</li>
<li>Edit Item</li>
</ul>
<ul class="nav nav-sidebar">
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Welcome</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Stock Number</th>
<th>Item Description</th>
<th>Unit</th>
<th>ABC</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${items}">
<td th:text="${item.stockNumber}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<scrip src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
enter image description here
On mobile (iOS using Safari and Google Chrome), lightly tapping without clicking a navbar item changes its color from gray to black (the behavior you get with :hover on desktop). This only happens with some of the items, however, and only if navbar-fixed-top is used. After searching in vain, I found a related issue, but unfortunately it was not addressed.
Removing the padding is not an option since doing so will render certain elements invisible. I would also like to avoid using navbar-static-top.
How should I go about this?
HTML:
<!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>Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<style>
body {
padding-top:50px;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Site</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Hover Broken #1</li>
<li>Hover Broken #2</li>
<li>Hover OK</li>
<li>Hover OK</li>
<li>Hover Broken #3</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top:25px;">
<div class="row" style="margin-left: 0px; margin-right: 0px;">
<div class="pull-right">
<label>
<div style="display:inline-block">Option: </div>
<div style="display:inline-block">
<select class="btn-sm btn-default" id="page_rows" style="cursor: pointer">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</div>
</label>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href=""><span class="badge">Count</span></a>
</li>
</ul>
<div class="table-responsive text-center">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
JSFiddle: https://jsfiddle.net/55acd3ex/
:hover wouldn't work on a mobile as your screen im guessing would have to sense when the users finger is hovering over the screen before the tapped on screen and i don't think any mobile phone currently has such magic :)
as for the navbar-fixed-top just remove it and everything should be ok
Looks like there is an official "answer" after all:
Even though real hovering isn't possible on most touchscreens, most
mobile browsers emulate hovering support and make :hover "sticky". In
other words, :hover styles start applying after tapping an element and
only stop applying after the user taps some other element. This can
cause Bootstrap's :hover states to become undesirably "stuck" on such
browsers. Some mobile browsers also make :focus similarly sticky.
There is currently no simple workaround for these issues other than
removing such styles entirely.
I am not sure why I can't view content beneath my navbar.All I get is blank in my in place of the <h1>Hello</h1>. Would appreciate some guidance for this code in particular, but also any resources to learn more about how to avoid this problem in the future.
<!DOCTYPE html>
<html>
<head>
<title>A random title piece.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../static/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container pull-left">
<a class="brand" href="../">Things and Stuff </a>
<div class="nav-collapse collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li class="divider-vertical"></li>
<li>
<form class="form-search">
<div class="input- append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">
Search
</button>
</div>
</form>
</li>
<li>
<a id="swatch-link" href="../popular">Example 1</a>
</li>
<li>
<a id="swatch-link" href="../sold">Example 2</a>
</li>
<li>
<a id="swatch-link" href="../new">Example 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Hello</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/json2.js"></script>
</body>
The content is hidden beneath your header .Wrap your content with a div with class container and than let us know .
Here is a jsfiddle
Jsfiddle with padding
<div class=".container">
<h1>Hellow world</h1>
</div>
And add the followingin your css
.container > h1
{
margin-top:70px;
}
Or you can use the following , I suggest using this one :
.container > h1{
padding-top:70px;
}
This is the same problem as https://github.com/twitter/bootstrap/issues/3287 (see image) but I don't understand the solution!
I have the following HTML:
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"</span></button>
<ul class="dropdown-menu">
<li> Action 1</li>
<li> Action 2</li>
<li> Action 2</li></ul></div></div>
</ul>
</div>
</div>
which should make a table with a button that can be clicked to reveal some dropdown options from the button.
Many thanks :).
This works for me
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="includes/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<table class="table">
<tbody>
<tr><td>some stuff</td><td>some more stuff</td></tr>
<tr>
<td>here's something</td>
<td>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> Action 1</li>
<li> Action 2</li>
<li> Action 2</li></ul></div></div>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>another row</td>
<td>with more stuff</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>