I am trying to create a header with dynamic height and is fixed at the top of the page while scrolling (visible throughout scrolling). The reason for dynamic height is due to the resizing of browser, so when the text in the header is wrapped, the height of the header is increased.
Therefore, the increased height covers part of the main body before the start of scrolling. Although I already tried to add padding-top: YYpx to the main body, when the height of header changes, it covers the main body's element. Basically, I would like to have 2 continuous containers but not overlapping each other, and the 1st will sticky at the top while scrolling the 2nd container.
I would like to scroll using the whole page instead of only having the scrollbar in the 2nd container. If this is not possible, then scrolling within the 2nd container can be accepted as answer as well, provided that the contents of 2nd container will shift down according to the new height of 1st container.
I have been struggling this for few days, I tried this, but the .header-container covers part of the background which is not something I intended.
I was trying to use navbar as header, but it turns out really restricting on what I can put inside, so I made a custom header instead to fix at the top.
Before (Without using CSS #media):
https://jsfiddle.net/q19of4j6/1/
After (I tried to use CSS to shift the 2nd container manually):
https://jsfiddle.net/q19of4j6/
Resize the above jsfiddle to see the problem.
Using #media to shift the container is not feasible for me.
What I have now:
CSS
.custom-navbar {
padding: 0.5rem 1rem;
}
body > main {
padding-top: 112px;
}
#media (max-width: 1153px) {
body > main {
padding-top: 136px;
}
}
#media (max-width: 955px) {
body > main {
padding-top: 160px;
}
}
HTML
<body>
<header>
<!--Fixed navbar-->
<nav class="custom-navbar fixed-top navbar-light bg-light">
<!-- Contents in the header that I wish to keep at the top while scrolling-->
</nav>
</header>
<main role="main">
<div class="container-fluid">
<table class="table table-striped table-bordered dataTable" cellspacing="0"
width="100%" role="grid">
<!--Contents of table, and contents that will move while scrolling-->
</table>
</div>
</main>
</body>
I would expect that while resizing the browser width(not yet start to scroll), the contents inside the main will shift according to the new height of header.
But now, when the header height increases, it covers part of the contents of main.
I would still expect the header to be fixed at the top of the page and contents in main can scroll using the full page scrollbar.
As you can see here, there's no simple way to have dynamic fixed header height. Most solutions involve setting a defined header height or JS.
IMO, the simplest solution is to use position: sticky instead of position: fixed:
https://www.codeply.com/go/ElHS24d2vT
<header class="sticky-top">
<!--Fixed navbar-->
<nav class="custom-navbar navbar-light bg-light">
<div>
whateverlalallala
</div>
</nav>
</header>
<main role="main">
<div class="container-fluid">
<table class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid"></table>
<p style="background:red">1</p>
<p style="background:blue">2</p>
<p style="background:orange">3</p>
<p style="background:green">4</p>
</div>
</main>
Related
How can i keep the footer sticky at the bottom when that certain page doesn't have enough content in it. Bootstrap class "sticky bottom doesn't work properly in such cases"
<body class="d-flex flex-column min-vh-100">
Add these to body, and these to footer
<footer class="mt-auto">
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
Don't forget to add
body { padding-bottom: 70px; }
or otherwise the page content may be covered
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
If you are able to change the HTML, then another approach that avoids the use of JavaScript is to include two copies of the header element:
<body>
<header id="show">
This fixed content will wrap on small devices.
</header>
<header id="flow">
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
Then you can use #show { position: fixed; zIndex: 10000 } for the first element (to keep the header visible), and #flow { display: hidden } on the second element to consume the space in the page flow.
I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP
I need to set the position of a table container as absolute based on the <body> container rather than its nearest positioned parent container.
Fixed position is NOT what I want since it positions it based on the viewport and not the main body (this is the expected behaviour for fixed).
Here is a little more details and code showing what I want.
CSS:
#media screen and (max-width: 480px)
I need the <table> content to have an absolute position based on the <body> container
and not the <div id="SearchForm"> container which is the nearest parent with its position set
HTML:
<body>
<div class="page"> <!--position: absolute;-->
<div id="Header"> <!-- position: fixed;-->
<div class="inner">
<div class="header-secondary"> <!--position: absolute;-->
<div id="SearchForm"> <!--position: relative;-->
<form action="......">
....<!--parent search bar form-->
</form>
<table> <!--quicksearch-->
...content <!-- quicksearch results popup-->
</table>
</div>
</div>
</div>
</div>
</div>
</body>
The reason behind this is that when the page is displayed in the mobile view for devices under 480px wide,
The <header> and <div id=searchform> stay fixed at the top of the screen/viewport regardless of scrolling down.
The <table> is the quickview search box that pops up during search showing nearest results.
The problem is, that this causes the quicksearch suggestion box to stay at the top as well. The rest of the page will scroll underneath it, but the suggestion box will stay "fixed" at the top of the screen.
This is somewhat fine if there were just a few results, but when there are more and it extends beyond the bottom of the screen/viewport, there is no way to scroll the suggestion box down to see the rest of them.
I could add a scroll bar for overflow but I want to be able to scroll beyond the quicksearch container and see the content of the main body if I keep scrolling down. As of now, the main content will scroll under the quicksearch results but always remain hidden under it.
if I use position:absolute; it will remain at the top of the screen and I won't be able to scroll down to the results that are offscreen.
If I use position:fixed; then the same thing will happen since it will be positioned based on its viewport and not based on the main body
My only current working option is to have the JS load outside DOM and thus have the ability place it anyway I want it.
This though creates other positioning issues when resizing the window beyond 480px for desktop view mode as it is harder to calculate the offset based on a child container that is deep in the body and keeps resizing dynamically when the window resizes.
Setting the table to position: absolute relative to the body will be impossible as long as any of it's parents has position: fixed.
You will have to move the <table> outside of the fixed header one way or another.
I would use an extra wrapper to be able to switch which element has position: fixed at what viewport width:
<body>
<div class="page"> <!--position: absolute;-->
<div class="ExtraWrapper"> <!-- position: fixed; above 480px -->
<div id="Header"> <!-- position: fixed; below 480px -->
<div class="inner">
<div class="header-secondary"> <!--position: absolute;-->
<div id="SearchForm"> <!--position: relative;-->
<form action="......">
....<!--parent search bar form-->
</form>
</div>
</div>
</div>
</div>
<table> <!-- quicksearch. position: absolute; below 480px -->
...content <!-- quicksearch results popup-->
</table>
</div>
</div>
</body>
Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this link I removed the Jumbotron outside all .container my page looks sth like this
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>
/////////////////////////////////////////////////
body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover;
}
Edit:
Firefox + Chrome + IE10 results ===|================|===
Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.
Just to share my experience after creating an MVC web application in Visual Studio 2013 I could not get the jumbotron to stretch the width of the screen no matter what I did. I ultimately found that it was being blocked by a default **container body-content tag on the Views/Shared/_Layout.cshtml page. After removing the tag it displayed correctly. Hope that helps anyone with a similar situation to mine.
The solution was simple. This is how I div it:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div> <===================this Div wrapping jumbotron
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</div>
</body>
No changes to any part of the CSS. I don't know why it works, but it just works.
If you're just trying to remove the padding, then you'll want to put padding:0; in your .specialjum and make sure that the custom stylesheet is called after bootstrap. Otherwise add padding:0!important; if it needs to be called before. Also repeat this for margin-right: and add in width:100%; if it isn't stretching to the width of the page which I believe it should already.
See this jsFiddle
For anyone else that may end up here I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside of it's container. What I did is just wrapped it in a <div class="row"></div>.
I'm still learning bootstrap so I don't know if this will cause any problems down the road, but for now it works pretty good.
In order to make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
Another option in _Layout.cshtml (Where "Home" is the page you want to be full width):
#if (ViewData["Title"].Equals("Home"))
{
#RenderBody()
}
else
{
<div class="container container-main">
<main role="main">
#RenderBody()
</main>
</div>
}
Change width of .container to 100%:
container { width: 100% }