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.
Related
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>
Currently, my website has not been looking all that great. So here's my issue:
I have created some basic and simple code, (Note: this code uses margins. I am not sure if this is an issue or not) but it aligns accordingly to the screen size, which doesn't look all that great. Try running this code through your browser to see what I mean:
HTML
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>
</head>
<body>
<nav>
<ul>
<h3 style="margin:15px;" class="logo">ONECLICKLEARN</h3>
<li><a class="navlink" href="#">Home</a></li>
<li><a class="navlink" href="#">About</a></li>
<li><a class="navlink" href="#">Templates</a></li>
<li><a class="navlink" href="/css-library">CSS Library</a></li>
<li><a class="navlink" href="#">Updates</a></li>
<li><a class="navlink" href="#">Downloads</a></li>
</ul>
</nav>
<div class="content-left">
<h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">Okay, let's get things straight: you're going
to get tired of clicking every single download button if you want
<em>all</em>
our libraries. So we came up with a little something that just might
brighten
your day a little. We call it <em>Ocelot</em>. Ocelot is our main library
that
rolls ever single library we have rolled into one. So clear your storage
space,
and get ready for <em>ocelot!</em> - Current version: 1.0.</h3>
<hr>
</div>
<div class="details">
<h1>GET OCELOT</h1>
<button class="button-greentheme">MORE INFO</button> <button
class="button-graytheme">SAFE LINK IT!</button>
</div>
<div class="content-left">
<h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">A new CSS library has <em>just</em> come out!
It's the first CSS library to be done by this website. The name is Bibrary.
This handy library covers all the buttons you could want, but remember - not
all buttons are covered, but be sure to watch this one. It could be updated
as much as 5 times a year!</h3>
</div>
<div class="details">
<h1>GET BIBRARY</h1>
<button class="button-greentheme">MORE INFO</button> <button
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
</div>
</body>
</html>
I have a margin-left:30px; as well as right 30px;
PLease give a reason if you DO thumbs down
You can use Bootstrap Framework. They're the most popular and used responsive framework, you can check getbootstrap.com. Theres a lot of good tutorials at youtube for Bootstrap.
If you want the no-framework way, you can use #media with pure CSS. You can read a lot of documentation by using google.
You can use media queries in the css file.
sample syntax here:
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Try this code
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>
<style>
.content{
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<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 logo" href="#">ONECLICKLEARN</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navlink" href="#">Home</a></li>
<li><a class="navlink" href="#">About</a></li>
<li><a class="navlink" href="#">Templates</a></li>
<li><a class="navlink" href="/css-library">CSS Library</a></li>
<li><a class="navlink" href="#">Updates</a></li>
<li><a class="navlink" href="#">Downloads</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-xs-12 content">
<div class="col-xs-12 col-sm-6 content-left">
<h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">Okay, let's get things straight: you're going
to get tired of clicking every single download button if you want
<em>all</em>
our libraries. So we came up with a little something that just might
brighten
your day a little. We call it <em>Ocelot</em>. Ocelot is our main library
that
rolls ever single library we have rolled into one. So clear your storage
space,
and get ready for <em>ocelot!</em> - Current version: 1.0.
</h3>
</div>
<div class="col-xs-12 col-sm-6 details">
<h1>GET OCELOT</h1>
<button class="button-greentheme">MORE INFO</button> <button
class="button-graytheme">SAFE LINK IT!</button>
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-12 col-sm-6 content-left">
<h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">A new CSS library has <em>just</em> come out!
It's the first CSS library to be done by this website. The name is Bibrary.
This handy library covers all the buttons you could want, but remember - not
all buttons are covered, but be sure to watch this one. It could be updated
as much as 5 times a year!
</h3>
</div>
<div class="col-xs-12 col-sm-6 details">
<h1>GET BIBRARY</h1>
<button class="button-greentheme">MORE INFO</button> <button
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
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
I'm testing the bootstrap navbar and how I do not know much about styles. When I click the icon, a dotted frame appears outside the image boundary, as follows:
image result
I know this is related to the page style, but do not know how to solve. Below is the exact code I'm using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="lib/img/mig.png">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
<h1 class="navbar-header" href="#">Home</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<br>
<ul class="nav nav-pills navbar-right">
<li class="active">
Home
</li>
<li class="">
About
</li>
<li class="">
Contact
</li>
<li class="">
Maps
</li>
</ul>
</br>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<body>
</body>
</html>
This wheel is standard browsers to "links"
To resolve you have two options
- Include it in your tag
a: active {
outline: none;
}
Include a height with the same height as your image
.navbar-brand {
height: 60px;
}
Helped?
Try to add this rule in your css file
a {
outline: none;
}
source: css tricks
The first posted answer may solve the problem, but it would also affect every anchor tag on the page, which seems a bit overkill.
I'd suggest this instead:
.navbar .navbar-brand:focus {
outline: none;
}
I am just learning the new bootstrap grid system however it is very different from 2.x and I can't seem to get it to contain anything, it just flows on out.
Screenshot: http://i.imgur.com/aBVgNVr.png
Code: http://pastie.org/8272634
<!DOCTYPE html>
<html>
<head>
<title>ICG - Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/over.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="blue" href="#">iCanGame</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Community</li>
<li>All Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="navend"></div>
<div class="container">
<div class="row">
<div class="col-xs-10">left</div>
<div class="col-xs-2"><div class="wrap">sdsafdsafdsafdsafdsafdsajlsdhakfhdksahlfdsahkfldsakfhkdsakfdkjslahfdskhaflhdksaklfhdsaklfdkhsa</div></div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Well the text has been overflowing because your sample text is a single word you have not included any space between those...
Please find code below..
<div class="row">
<div class="col-xs-10"><p>left</p></div>
<div class="col-xs-2"><div class="wrap"><p>
sdsafds dhakfhdks ahlfdsahkf ldsakfhk dsakfdkj slahfd skhafl hdksaklfhds aklfdkhsa</p> </div></div>
</div>
You are using two .col-md-12, shouldn't you be using only two .col-md-6 classes, since the .col-md-12 are width:100% divs?
Because you are giving a no-space-contain word.
Ex:
string like adfjklsdjfaksdjfsakldjfsakl;fjsakl;djf won't work.
instead, string like asdfkljsd;lf asdfkjds asdkfjklj will work
And the grid system will not cut single word into two line.
By the way, give testing paragraph by typing will not be a great idea.
Try Something like paragraph generator
to generate random paragraph.