In my code, I have a persistent gap at the very top of my page that appears to be set to the tag by Bootstrap. I have searched via Firefox's inspector and have found nothing. Trying to add margin: 0; padding: 0; to the tag has done nothing either.
The #intro div here should be right at the top, but the space appears above it.
<body>
<div id="intro" style="width: 100%; padding:0; margin:0; text-align:center;">
<h2>Test</h2>
</div>
<nav class="navbar navbar-default" role="navigation" style="margin: 0; opacity: 0.95;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#" id="brand-mobile">Map My Cash</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: center;">
<ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
#RenderBody()
</body>
You will have to override the default css.
Add following CSS after the default bootstrap CSS you are using:
body{
padding-top:0px;
margin-top: 0px;
}
Got it! The h1 was the problem. I added:
h1 {
margin-top: 0;
}
No-gap at the top of the page anymore!
You should add "margin: 0; padding: 0;" to the body tag
I ended up having to assign a border to get rid of the whitespace at the top.
<body><div style="border-top:solid black 1px;"><my-app>Loading...</my-app></div>
I found the problem in Site.css in the Content folder in my project.
body {
padding-top: 50px;
padding-bottom: 20px;
}
I simply commented-out the padding.
Can you try using reset css.there is a possiblity that the div or body can have some default padding or margin.
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 3 years ago.
I'm trying to create a simple website that has a Header containing the logo and other information, then a ribbon as separator and then a two-column section. Left column will have a selector. Right column will have information depending on the option chosen on the selector.
I was able to do this so far but now I wanna take it to the next level.
I would like my site to always fit to the window so no vertical scrollbar needed.
I'm comfortable with the sizes of my header and ribbon so I want the two-column section to take the remaining space in the window. The scrollbar, if needed, would be on the information div.
Just in case, I want the left-half (selector) to take as much space as it needs. Right-half (information) should adjust to the space it has left.
I have this code so far:
CSS
.container {
display: table;
width: 100%;
}
.left-half {
display: table-cell;
background-color:#7ec0ee;
}
.right-half {
display: table-cell;
overflow: auto;
}
HTML
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
Here I have use some bootstrap classes. I think this will help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm" style="background-color: lavender">
One of three columns
</div>
<div class="col-sm" style="background-color: #EAE7EE">
One of three columns
</div>
<div class="col-sm" style="background-color: #E6E2EB">
One of three columns
</div>
</div>
</div>
</body>
</html>
I suggest using flex. It's fantastic for responsive designs. You can set the width in the flex property on your left or right halwes.
.container {
display: flex;
width: 100%;
height: calc(100vh - 98px); //98px is the height of your header
}
.left-half {
flex: 1;
background: red;
}
.right-half {
flex: 1;
padding: 1em;
overflow: auto;
background: blue;
}
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
This might work for you. you can make use of the calc function in CSS.
.container {
display: flex;
width: 100%;
height: calc(100vh - 100px); //Replace this 100px with whatever value elements other than container are occupying
}
.left-half {
width:50%;
background-color:#7ec0ee;
}
.right-half {
background: red;
width: 50%;
}
The following code is a part of an html file which utilizes bootstrap. Mainly I want to style <a> which has a class .navbar-brand. To do so I added another class .grandchildlink to <a> (don't pay attention to the name). The problem is that it does not work this way.., the two alternatives were:
1. Using descendant selectors eg. by using the class .parentbody of <body> and then ( .parentbody .grandchildlink:hover, .parentbody .grandchildlink:focus{...})
2. Adding an id attribute to <a> say: grandchildlink_id and then (#grandchildlink_id:hover, #grandchildlink_id:focus {...})
.., the question is why isn't it working with a one class selector ?
.
.
.
<style type="text/css">
.grandchildlink:hover, .grandchildlink:focus {
background-color: transparent;
color: yellow;
}
</style>
</head>
<body class="parentbody">
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle naviagation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="grandchildlink navbar-brand" >BrandName</a>
<div class="navbar-collapse collapse">
<ul></ul>
</div>
</div>
</div>
.
.
.
Because of css specificity. This is the CSS bootstrap uses.
.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
color: #fff;
background-color: transparent;
}
That means to overwrite it, you need to use .navbar-inverse .grandchildlink {} or something with an equal (as long as your styles come after bootstrap.css) or higher specificity, like you listed in your examples.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-inverse .grandchildlink:hover, .navbar-inverse .grandchildlink:focus {
background-color: transparent;
color: yellow;
}
</style>
<body class="parentbody">
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle naviagation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BrandName
<div class="navbar-collapse collapse">
<ul></ul>
</div>
</div>
</div>
I use bootstrap navbar, and it collapses fine on small screens, shows the navbar-toggle and the dropdown menu if I click on the navbar-toggle. Standard behavior.
I want, however, to hide the entire navbar ribbon on small screens and just show a button on top middle part of the screen. When I click on this button, it should open the dropdown navbar. This is my html:
<div class="navbar-show">
<button type="button" class="navbar-toggle" onclick="document.getElementById('toggle-button').click();">
<img height="50px" width="50px" src="img/logo3.gif">
</button> </div>
<nav class="navbar navbar-default" data-ng-controller="GlobalAuthCtrl"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" id="toggle-button" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://gliderforecast.com"><img height="50px" width="48px" src="img/logo3.gif"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
My css:
#media (max-width: 767px) {
.navbar{
display:none;
}
.navbar-show {
display: block !important;
}
}
.navbar-show {
display: none;
position: fixed;
z-index: 10;
top: 0px;
left: 50%;
}
It shows the regular navbar on large screens, hides the navbar and shows the button on small screens, but I cannot get it show the collapsed navbar dropdown when I click on the button. Please guide me in the right direction. A completely different approach is also fine, just have the required functionality. JQuery is not preferred, (I am using angularJS) but can use it too.
You can delete the #toggle-button part. And try:
<div class="navbar-show">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<img height="50px" width="50px" src="img/logo3.gif">
</button>
</div>
Bootstrap links it's JS part through data- attributes here.
I want to add static (not movable) header to the off canvas push menu.
here is what I have for now: codePen link
<span>This text should not move</span>
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>Slide in</li>
<li class="active">Push</li>
<li>Reveal</li>
<li>Off canvas navbar</li>
</ul>
</div>
<div class="navbar navbar-default"> -------------------- navbar should not move -----------------------
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas=".container">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<h1>Content that should move. Menu should slide from the left side UNDER the navbar</h1>
</div>
the problem is that I don't know how to force menu slide under the 'navbar'.
Any ideas?
You need to add top:120px to make it appear below the navbar
.navmenu-fixed-left, .navmenu-fixed-right, .navbar-offcanvas {
position: fixed;
z-index: 1050;
top: 120px;
bottom: 0;
overflow-y: auto;
border-radius: 0;
}
DEMO
I was looking for a sidebar to my admin template and I wanted to use jasnybootstrap.
My goal was to resize the content and do not translate out of the screen.
A similar effect is this http://startbootstrap.com/template-overviews/simple-sidebar/
I hope someone can tell me if it is possible to obtain such a result.
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Jasny Bootstrap starter template</h1>
<p class="lead">Use this fiddle to demonstrate an issue with Jasny Bootstrap or to show an example using Jasny Bootstrap.</p>
</div>
</div>
</div>
http://jsfiddle.net/k9K5d/13/
Thanks in advance
I have made it using CSS.
#myNavmenu ~ .container {
padding-left: 10px;
}
#myNavmenu.canvas-slid ~ .container {
padding-left: 320px;
}
http://jsfiddle.net/k9K5d/14/
I have made it using Jquery.
http://jsfiddle.net/k9K5d/15/
// JS
$(".navbar-toggle").click(function(e) {
e.preventDefault();
$(".container").toggleClass("slide");
});
// CSS
.container.slide {
padding-left: 10px;
}
.container {
padding-left: 320px;
}
http://jsfiddle.net/k9K5d/15/
You just need to make a change in padding-left property for class 'container'.