I'am having an strange issue with a switch whenever it is inside my webs navbar, I`ve made a fiddle to replicate the issue:
Issue replication
<header>
<div class="navbar-fixed">
<nav style="background: #F30617" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#Url.Action(" Main ", "Home ")" class="brand-logo">
<div class="flow-text title" style="white-space: nowrap;">Planning Cycle Dashboard</div>
</a>
<div class="switch" style="float: right">
<label>
<input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
<span class="off center-align" style="color: white;">Today</span>
<span class="on center-align" style="color: white;">Weekend</span>
</span>
</label>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="switch">
<label>
<input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
<span class="off">Today</span>
<span class="on">Weekend</span>
</span>
</label>
</div>
</main>
And as you can see, what I want to achieve is the switch that is below the navbar.
My question is...why if it is working on the switch below the navbar it does not on the one that is inside the navbar? It has the same structure...it should work!
Dont know why it pushes the text outside the switch!
Any ideas?
First of all, you have a typo in your html:
<span class="off center-align" style="color: white;">Today</span>
<span class="on center-align" style="color: white;"></span>
Weekend
</span>
See Weekend is out of the .on span? You would not miss it if you had made your code indented better.
Fix it first, then add:
.switch label .lever, .switch label .lever span {line-height:20px}
it will do the trick as without it they inherit line-height:56px from nav.
Related
When using the has-feedback class to add an icon on a form field and using the bootstrap tooltip, the icon moves up. I get the same behavior with chrome, firefox and ie.
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback">
<input class="form-control" name="foo" placeholder="foo" data-toggle="tooltip" title="Hooray!" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
JS File
$('[data-toggle="tooltip"]').tooltip();
Here the example
Bootply
Does anyone know how to solve this problem? Thank you
The reason for it failing is this Bootstrap selector:
.form-group-lg .form-control+.form-control-feedback {...}
When you hover the field, the tooltip's <div> is inserted immediately after the input, thus breaking the + condition since the icon is no longer immediately following the input. A solution is to move the tooltip on the parent element, so that it doesn't interfere with children styling:
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback" data-toggle="tooltip" title="Hooray!">
<input class="form-control" name="foo" placeholder="foo" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
Demo: http://www.bootply.com/tohoEsh0cX
I've added both feedback and a button addon to an input field in my form. My HTML is the following:
<div class="form-group has-feedback">
<label class="col-sm-4 control-label" for="authorization_id">AutorisationsID</label>
<div class="col-sm-4">
<div class="input-group">
<input name="authorization_id" class="form-control" type="text">
<span class="glyphicon form-control-feedback"></span>
<span class="input-group-btn">
<a href="#" id="authid-info-btn" tabindex="0" class="btn btn-info" role="button" data-position="auto right" data-container="body" data-toggle="popover" data-trigger="click" data-content="And here's some amazing content. It's very engaging. Right?">
<span class="glyphicon glyphicon-question-sign">
</a>
</span>
</div>
</div>
<div class="col-sm-4 control-label control-label-left-align"></div>
</div>
Here's what it looks like:
And here's what I want it to look like
The feedback is positioned wrong when the button addon is present. Am I missing something or does Bootstrap not support this design?
I slapped your content into a fiddle here: http://jsfiddle.net/DTcHh/2459/
But I don't know how to get the X to come up. Is there any way you can emulate that in the fiddle?
It will be something like
.redX {
position: relative;
left: -10px;
}
Or possibly a small adjustment to margin or padding. It could be a lot of things but likely a simple-ish fix in css. A live example would be best, really.
I'm trying to create a navigation bar which contains an input field. I would like the input field to occupy all available space in the navigation bar.
Following this answer, I successfully created a layout similar to what I want, which contains an "addon" icon to the left of the input field (see code here).
But: I don't want the icon near the input field.
The following code controls the input field:
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control">
</div>
</div>
</form>
The problem is that removing <span class="input-group-addon">...</span> to get rid of the icon, makes the input field contract to a smaller size and loose the rounded edges (which is less important. see code here).
Of course it doesn't make sense to wrap a single input field in an "input-group". But removing the "input-group" wrapper causes the input field to expand and break into a new line (see code here).
After looking at Bootstrap.css I tried to create a new css class which mimics the relevant code of the input-group class. This brings back the input field inline in the navbar, but still does not make it expand to occupy all available space (see code here).
My question is: How do I get the layout I want without the icon?
Bonus: Why are the "input-group" and the icon making the input field expand?
Required browser compatibility: Chrome, Firefox, IE8+
Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.
http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1
http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2
.test {
display:table;
}
.test > .form-control {
display: table-cell;
margin-left:-3px;
}
.test > span {
display: table-cell;
width:1%;
padding:0 3px;
}
HTML
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="test">
<span><!--shim--></span>
<input type="text" class="form-control">
</div>
</div>
</form>
Replace with this html: (made changes to glyphicon glyphicon-search and background-color, border of input-group-addon) Made the round edges too :)
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="#">Some Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
<input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
Worked really hard to get to what you require. hope you appreciate :)
This will get you pretty much where you want to be
<div class="form-group" style="display:inline;">
<div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
<input class="form-control" type="text" placeholder="Search">
</div>
</div>
It will not fill exactly all the space but it will fill most of it and will center the search box so it does not look out of place. Added more dynamic column sizing extra small screen uses a dropdown menu so I re-sized the box to fit the screen. to build a fully responsize page as you are describing you should probably nest everything inside a grid because col-?-? is not a fixed width it is a percentage width based on it's container.
I'm currently trying to edit the RES userbar for my subreddit. It looks like this:
It also collapses.
I want to float almost all of the elements to the right so that they are lined up vertically. The html for the bar is:
<div id="header-bottom-right" class="res-navTop">
<div id="userbarToggle" title="Toggle Userbar" class="userbarHide">»</div>
<span class="user">
<a href="http://www.reddit.com/user/snowe2010/" style="margin-right: 2px;">
snowe2010
</a>
<span id="RESAccountSwitcherIcon"></span>
(
<span class="userkarma" title="">
<a title="link karma" href="/user/snowe2010/submitted/">9</a>
·
<a title="comment karma" href="/user/snowe2010/comments/">
2170
</a>
</span>
)
</span>
<span class="separator">|</span>
<a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail"></a>
<a id="mailCount" href="/message/unread/"></a>
<span class="separator">|</span>
<a title="no new mod mail" href="http://www.reddit.com/message/moderator/" class="nohavemail" id="modmail">mod messages</a>
<span class="separator">|</span>
<ul class="flat-list hover">
<li>
preferences</li>
</ul>
<span class="separator">|</span>
<span id="openRESPrefs">
<span id="RESSettingsButton" title="RES Settings" class="gearIcon newNotification">
</span>
</span>
<span class="separator">|</span>
<form method="post" action="/logout" class="logout hover">
<input type="hidden" name="uh" value="zoimwqbhhl59526448277e691374c3d0bc47706bb35d0045b9">
<input type="hidden" name="top" value="off">
logout
</form>
</div>
I've currently tried setting each element to a block and then floating right, but that isn't working. I've also tried setting them to display: table-cell; and aligning it, but that isn't working either.
Can anybody help me with this?
#header-bottom-right a {
display: block;
float: right;
}
#header-bottom-right .separator { display: none; }
This is a pretty unrefined approach, but it's a starter. There's plenty of room for smoothing out the rough edges if you want to continue with this approach.
I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><i class="icon-home"></i>Home</li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Assembly Elections 2013</li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><i class="icon-th"></i>Constituecy</li><li ng-class="{active:section=='discuss'}"><i class="icon-time"></i>Election News</li><li class="divider-vertical"></li><li><i class="icon-bell"></i>Candidate</li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
Popular
</li>
<li>Trending</li>
<li>Latest</li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
This is handled by adding some padding to the top of the <body>.
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px;
}
Also, take a look at the source for this example and open starter-template.css.
I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:
The page is loaded / reloaded.
The browser window is resized as this could hit a different responsive breakpoint.
The navbar content is modified directly or indirectly as this could provoke a height change.
This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Just define an empty navbar prior to the fixed one, it will create the space needed.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.
You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)
The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
#media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
#media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li> options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.
Hope this helps...
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-header class in my page, under the nav. Also i used the <nav> tag instead of <div> but i am not sure it would present any different behavior.
Using the page-header as a container for the page, you won't need to mess with the <body>, only if you disagree with the default space that the page-header gives you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
If you are using Bootstrap 5 and want navbar at top then replace fixed-top with sticky-top.
Problem solved of hidden data under navbar.
i solved it using jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>
Easy:
Code (JS)
document.addEventListener("DOMContentLoaded", function(){
navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
});
StackOverflow throws an error due to the class navbar not existing.