My page is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:layout="http://www.ultraq.net/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
</head>
<body>
<div layout:fragment="content">
<div th:with="rowW='row col-md-9',userNameW='col-md-1',deviceIdW='col-md-4',timestampW='col-md-4',reasonW='col-md-2'">
<div><span th:text="'function='+${function}"></span></div>
<div th:unless="${function} != null and ${function} == 'save'">
<div class="col-md-3 btn btn-primary" th:classappend="rowW">New Card</div>
</div>
<div th:if="${function} != null and ${function} == 'save'">
<div class="col-md-3 btn btn-primary" th:classappend="rowW">New Card</div>
</div>
</div>
</div>
</body>
</html>
If function is null, the layout is displayed. If function is card the layout is not displayed:
For function=null:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="//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>
<script src="/resources/pwstrength.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navigation">
<div id="navbar-examle" class="navbar navbar-static">
<div class="navbar-inner">
<div id="a" class="container" style="width: auto;">
<a class="brand" href="#" style="float:left;"><img
src="/images/Dadavatar.png"><span>My Project</span></a>
<ul id="b" class="nav" role="navigation">
<li id="c" class="dropdown" style="float:left;">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
<ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>English</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Administration</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div><span>function=null</span></div>
<div>
<div class="col-md-3 btn btn-primary rowW">New Card</div>
</div>
</div>
</div>
<br>
<br />
<div id="qr">
<p>
<span>Scan this Barcode using Google Authenticator app on your phone</span>
Android
<span>and</span>
iPhone
</p>
</div>
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
For function=save:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />
<script src="//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>
<script src="/resources/pwstrength.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="navigation">
<div id="navbar-examle" class="navbar navbar-static">
<div class="navbar-inner">
<div id="a" class="container" style="width: auto;">
<a class="brand" href="#" style="float:left;"><img
src="/images/Dadavatar.png"><span>My Project</span></a>
<ul id="b" class="nav" role="navigation">
<li id="c" class="dropdown" style="float:left;">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
<ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>English</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Administration</span>
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div><span>function=save</span></div>
<div>
<div class="col-md-3 btn btn-primary rowW">New Card</div>
</div>
</div>
</div>
<br>
<br />
<div id="qr">
<p>
<span>Scan this Barcode using Google Authenticator app on your phone</span>
Android
<span>and</span>
iPhone
</p>
</div>
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>
The following is the diff output for the two files:
$ diff thymeleaf*
91c91,92
< <div><span>function=null</span></div>
---
> <div><span>function=save</span></div>
>
95d95
<
$
It actually looks like the fault is not in Thymeleaf but the Chrome browser. Does anyone have any idea how to proceed?
I've tried a number of things but as far as I can tell the only difference in the actual HTML is blank lines.
I checked out the page with chrome inspect and it looks like I have a problem with the css path. The relative paths for the static files fails when the url has extra elements in the path. Of course.
Related
I tried to make a simple dropdown menu with Bootstrap but it appears on the bottom of the page. What's going wrong?
.dropdown-informatie {
overflow: hidden;
float: left;
}
.dropdown-pagina {
float: left;
overflow: hidden;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1> Test </h1>
<p>Test</p>
<div class="dropdown-pagina">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Pagina's <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">Pagina 1</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 2</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
<div class="dropdown-informatie">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Informatie <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">informatie 1</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 2</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
YOUR NEW CODE
Instead of using "dropdown-pagina" as a class you will need to use just dropdown. Then a second and third class for pagina and informatie can be made for specific styling as dropdown is a defined Bootstrap class.
The structure for a Bootstrap 3 drop down is as follows:
div.container {
margin-top: 20px;
}
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
Prototyping a categorical classification system, I'm using Boostrap dropdown buttons in a pill-style navigation. I'm not committed to the pills, so if a different class such as a navbar might work instead, I'll change, though I did already try using navbar and button groups.
I don't know for sure that JavaScript inclusions might not be the problem, but I don't have dropdown.js in my distribution of Bootstrap. Compiling a custom version with only the components I need is way beyond my skill and the scope of the project.
CSS and JavaScript inclusions in head tag:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.2.1.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
Code for dropdown list:
<div id="taglist">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="dropdown">
<a id="number-list" href="#" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true">
Number<span class="caret"></span>
</a>
<ul id="number-list-menu" class="dropdown-menu" role="menu" aria-labelledby="number-list">
<li><a tabindex="-1" role="menuitem" href="#">One</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Two</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Three</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Four</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Five</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a id="actors-list" href="#" role="button" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">Actors<span class="caret"></span></a>
<ul class="dropdown-menmu" id="actors-list-menu" role="menu" aria-labelledby="actors-list">
<li><a tabindex="-1" role="menuitem" href="#">goats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">children</a></li>
<li><a tabindex="-1" role="menuitem" href="#">dogs</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cows</a></li>
<li><a tabindex="-1" role="menuitem" href="#">donkeys</a></li>
<li><a tabindex="-1" role="menuitem" href="#">horses</a></li>
<li><a tabindex="-1" role="menuitem" href="#">birds</a></li>
<li><a tabindex="-1" role="menuitem" href="#">ducks</a></li>
<li><a tabindex="-1" role="menuitem" href="#">adult humans</a></li>
</ul>
</li>
</ul>
</div>
That code follows the example from the getbootstrap.com JavaScript page as closely as possible, except with my own id names.
PaulL, You have a typo in this line...
<ul class="dropdown-menmu" id="actors-list-menu" role="menu"
Just change the dropdown-menmu to dropdown-menu.
I have my dropdown menu in my _Layout.cshtml and clicking on one of the menu items works fine the first time, for example takes me to http://localhost:52098/Home/ViewTable/Scottish Premiership.
If I click on the URL again, it tries taking me to http://localhost:52098/Home/ViewTable/Home/ViewTable/Scottish Premiership
The navigation Code:
div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Scotland <span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="Home/ViewTable/Scottish Premiership">
Scottish Premiership
</a></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
Scottish Championship
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish First Division
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish Second Division
</a>
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
England <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Premier League
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Championship
</a>
</li>
</ul>
</li>
</ul>
// #*#Html.MvcSiteMap().Menu(false, true, true, true, true)
#Html.MvcSiteMap().SiteMapPath()*#
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
</div>
</div>
Looks like it's taking a relative path from the one i'm already on + the href on the link, where as what I really want is an absolute path?
Add '/' to the start of your URLs
like /Home/ViewMain/Scottish ChampionShip
And it is always better to use
#Url.Action("MethodName", "Controller")
e.g.
Test
To pass a Parameter in URL
Test
I'm using Bootstrap and I have two dropdowns next to each other, something like this:
|Dropdown1| |Dropdown2|
I have some values in dropdown1 that have lots of characters and I don't want them to disturb the width as soon as they are pressed. How can I do that ?
Here is my dropdown
<div class="dropdown">
<div class="btn-group" id="storeId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript Tutorial</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
I am new to Bootstrap and I am in the process of getting to know it. I am trying to position a dropdown menu just in the center of the page, I manage to center the link that toggles the menu but this menu shows out of place.
This is what I tried:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->
Obviously the link is center because I am using .text-center for the div containing everything, I have tried using the class center-block but it doesn't help. Any hints?
dropdown is a block element, aligning it with text-align:center will not work on block elements. try adding display: inline-block on dropdown div. check out the jsfiddle ex. http://jsfiddle.net/kuyabiye/KLH8S/
<style>
.dropdown-center {
text-align: center;
}
.dropdown-center .dropdown {
display: inline-block;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 dropdown-center">
<div class="dropdown">
<a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
</li>
</ul>
</div>
<!-- /div.dropdown -->
</div>
<!-- /div.col-md-4 .col-md-offset-4 -->
</div>
<!-- /div.row -->
</div>
<!-- /div.container -->