Given the following example, what would be a good approach to position the Search button in line with the date input controls?
I gave it a shot with Bootstrap (2 rows, 3 columns) but the layout should stick to the left and keep the 3 logical columns together. And maybe there's an easier solution I am overlooking.
JS Bin HTML
Note: based on the simplified output from Telerik's Kendo UI combined with ASP.NET MVC.
Flexbox requires IE10+
Here is the solution that works everywhere and won't break bootstrap's responsiveness http://output.jsbin.com/ladezahija/1/
Idea is to apply to elements (blocks with date and search button) next rule:
.element {
display: inline-block;
vertical-align: bottom;
}
In an example I had to use float: none to redefine previously added property by bootstrap.
Also make sure you add a separate class for container and inner elements you work on.
I would go with CSS Flex.
using this CSS would align them for you. (you will need some vendor prefixes)
$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
dataSource: [
{ foo: "foo", bar: "bar" }
]
});
.container-fluid {
display: flex;
justify-content: space-around;
}
.container-fluid > div {
align-self: flex-end;
}
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="container-fluid">
<div style="margin: 20px; float: left;">
<h4>
<label for="StartDate">From</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<h4>
<label for="EndDate">To</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
</div>
</div>
You didn't used bootstrap properly. Anyway I have two solution.
First Solution:=> Add a blank h4 <h4> </h4> into last div.
Second Solution:=> Use margin-top:60px to k-button.
Usually, when you press the <DOWN ARROW> key on an <input>, you can access to the last saved values of the <form> (useful for remembering username, email) :
I have a Bootstrap <input> for which <DOWN ARROW> does not work (it does not show anything), even if there is a history (I know this because when I click in the input, I can see a dropdown menu with past values).
What could be the reason for <DOWN ARROW> not showing the past history of a form input?
Of course, as you have no previously entered input on your browser for this demo page : http://bigpicture.bi/php/test.php , you will not be able to see what happens when <DOWN ARROW>, but still the HTML code could be useful to debug :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="mainnavbar">
<div class="container">
<ul class="nav navbar-nav navbar-right" id="loginsignupmenu">
<li class="dropdown">
Login / Sign up<span class="caret"></span>
<ul class="dropdown-menu" role="menu" style="min-width: 250px; padding:12px 20px;">
<form id="loginmenu" method="post" autocomplete="on">
<input class="form-control logindropdown signup login forgot" name="email" id="email" type="text" placeholder="example#email.com" title="Enter your email or username" autocomplete="on" />
<button class="btn btn-primary btn-logindropdown logindropdown login" id="login" type="submit">Login</button>
</form>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Please refer to the code fragment below. It is a simple navbar.
Unfortunately, the collapse-toggle button appears above the brand (because it breaks the line, behaving like a block), what is unexpected. The expected behavior is that it appears beside. Further, if I try to float it with .navbar-right, it doesn't work. What could it be?
http://jsfiddle.net/X3pVX/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="btn btn-default btn-sm navbar-btn" data-toggle="collapse" data-target="#navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="#">Projeto Si</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<form class="navbar-form form-inline navbar-right">
<div class="input-group" style="max-width: 400px">
<input id="filter" class="form-control input-sm" type="text" placeholder="O que você está procurando?"/>
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></button>
</span>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Hey whats sup? I'm from Brazil too.
You only have the html file?
if yes you need to use css. never use style on html, HTML is for content and CSS for style.
create a css file and put the code below between the head tag.
<head>
<link rel="stylesheet" type="text/css" href="FileName.css" />
</head>
after that choose the class that you want to modify the position and try the code below
.navbar-right {
position:absolute;
left:150px;
}
try different pixels values and see which one works better for you.
If you don't know anything about css i recommend http://www.w3schools.com/
study there just for have a notion.
I have this site and my links to css and javascript is working but the problem is that the css are not applied on the site. also when i visit the link for my css the browser downloads the css and javascript file. I have tried Googles PageSpeed Insights and it said that
Eliminate external render-blocking Javascript and CSS in
above-the-fold content
My stylesheet is not working because of this.
Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php
this is the file structure of my site. I use Smarty Templating and Bootstrap on my site.
My templates are inside the view folder
Sample Code
index.php
<?php
require_once('includes/initialize.php');
$smarty = new Smarty_skyerp();
//$smarty->testInstall();
$smarty->assign('title','Skyerp | Home');
$smarty->assign('year',date("Y", time()));
$smarty->display('index.tpl.html');
?>
index.tpl.html
{extends file='layout.tpl.html'}
{block name='nav'}
<ul class="nav">
<li class="active">Home</li>
<li>SkyERP</li>
<li>SkyPayroll</li>
<li>Manuals</li>
<li>Support</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
{/block}
{block name='content'}
<div class="row-fluid"></div>
{/block}
layout.tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$title}</title>
<link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet">
<link href="assets/css/docs.css" type="text/css" rel="stylesheet">
<style type="text/css">
body {
<!--background-image: url('assets/img/skyerp_blue.jpg');-->
background-size: 80%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:bottom;
}
</style>
<link href="assets/css/stickyfooter.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery.js"></script>
{block name="head"}{/block}
</head>
<body data-spy="scroll" data-target=".module-sidebar">
<div id="wrap" style="height: 100%;">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.php" style="padding: 6px 10px 1px 0;"><img src="assets/img/headerfull.png"/></a>
<div class="nav-collapse collapse" style="margin-top: 14px;">
{block name='nav'}{/block}
<!--<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn btn-primary">Sign in</button>
</form>-->
</div>
</div>
</div>
</div>
<div class="container">
{block name='banner'}{/block}
{block name='content'}{/block}
</div>
<div id="push"></div>
</div>
<footer id="footer" class="footer">
<div class="container">
<p>SkyErp © {$year}. All Rights Reserved.</p>
<p></p>
<p></p>
<ul class="footer-links">
<li>Blog</li>
<li class="muted">·</li>
<li>Issues</li>
<li class="muted">·</li>
<li>Changelog</li>
</ul>
</div>
</footer>
<script src="assets/js/bootstrap.min.js"></script>
{block name='script'}{/block}
</body>
`
What is the cause of the problem?
Is the problem on the server side or how i process my files?
What should i do to fix this?
I found a fix for this. I think the problem was on the server side. . My website runs on Windows Server. Under IIS Setting on custom MIME types , i added .css set mime type to text/css and .js set mime type to text/javascript. Haven't tried on Apache.
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.