i use affix bootstrap but don't work
i like set nav fix right and create content div with 12 grid.(create fixed sidebar)
code :
<section class="container-fluid">
<div class="affix navbar-side">
nav
</div>
<div class="col-md-8">
content
</div>
<section>
css :
.navbar-side{
width: 400px;
}
when content full overflow data go to under nav sider i don't like.
How fixed this problem ?
https://jsfiddle.net/8f8c8wur/
I read in this, the affix is style that you must create by your own and put it in the data-spy, not in class..
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Hope this help you..
Related
Hi I feel dumb for asking the following but im at a loss. I am trying to create the following layout for a website but have not been able to create exactly what I want. I know it should be very simple to do but I'm a developer not a UI / UX wizard.
So im looking to have a side bar on the left with menu items, a top nav (fixed to the top of the page) and a footer fixed to the bottom of the page with the main body of the site scrolling within the area left between the top nav and footer.
There are also pages where I would like the content in the main body to be vertically and horizontally aligned (form input)
Ideally im looking to use bootstrap 5.2 but am not against using css grids or whatever magical methods there may be to get to what im looking to do. I'm also looking to try and make this all responsive hence starting to use Bootstrap I didn't want to have to implement my own media queries to do it.
Thanks in advance for any help or suggestions, I have been hitting my head against a brick wall with this for far too long and thought I would reach out and see if anyone was able to help.
You have two distinct columns, (1) sidebar and (2) everything else.
Within the main row, we can form the two columns: col-2 and col-10, with the first acting as our sidebar and the other acting as our main column.
In the main column, we add a row and then add to it the nav, main content and footers.
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 bg-dark text-light">
sidebar
</div>
<div class="col-10 bg-light">
<div class="row h-100">
<div class="col-12 bg-primary nav">
nav
</div>
<div class="col-12 main">
<p>1</p>
<div style="height: 5000px;">a</div>
<p>2</p>
</div>
<div class="col-12 bg-primary footer">
footer
</div>
</div>
</div>
</div>
</div>
In the CSS we set the height for the nav and footer, and then use calc() to measure the height our main content should be and set the overflow to scroll to get the scrollbar if the content is larger than the height.
.nav {
height: 60px;
}
.main {
height: calc(100vh - 120px);
background: #f1f1f1;
overflow: scroll;
}
.footer {
height: 60px;
}
Folks,
I'm having trouble on my website:
http://clubedebeneficiosunilife.com.br/
There is a section 'Destaques' thumbs with 16 images and a 'Saiba mais' button for each of the 16.
When I open the site on a monitor 15, 17, 19 inches is all normal. OK!
When I open in a cell phone, it's also good. The bootstrap works fine and the 16 thumbs that before were 4x4 ... pass to 2x8 to fit the smaller cell screen:
Like this link:
http://mobiletest.me/iphone_5_emulator/?u=http://clubedebeneficiosunilife.com.br
It is so perfect.
My problem is when I open a tablet:
http://mobiletest.me/ipad_mini_emulator/?u=http://clubedebeneficiosunilife.com.br
The section 'Destaques' is displaying thumbs in 2x8 (is correct), but note that is extrapolating the container with white background that he should stay inside.
How can I fix the CSS so that the resolution of the tablet does not occur this problem?
I do not have much experience, and I'm with a lot of difficulties in solving this.
Thanks in advance.
You should be really using container-fluid class instead of container, as the latter has a fixed width and when you place fixed width container within fixed width container it will overflow because of all the paddings, where as container-fluid is set to 100%
<div class="container-fluid">
<h2 class="left">Destaques</h2>
...
</div>
Demonstration of problem:
.container, .container-fluid {
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>.container</h1>
<div class="container">
<h2>.container</h2>
<div class="container">
<h3>.container</h3>
</div>
</div>
</div>
<hr>
<div class="container">
<h1>.container</h1>
<div class="container-fluid">
<h2>.container-fluid</h2>
<div class="container-fluid">
<h3>.container-fluid</h3>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/8tkLtjya/
I have a two columns layout like this:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
</div>
</div>
If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: https://codepen.io/marcanuy/pen/YWYZEp
CSS:
.sticky {
position: sticky;
top: 10px;
}
HTML:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4 sticky">
</div>
</div>
But when I set the sticky property only to the menu that is located in the sidebar, so the related articles section scrolls normally and gets the sticky behaviour with the menu div, it doesn't work:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
<div class="menu sticky">
</div>
</div>
</div>
This is the screencast of the first example scrolling the whole sidebar with a sticky behaviour, and then changing the sticky property to the menu that doesn't work:
Bootstrap 4 recommends the sticky property as the dropped support for the Affix jQuery plugin:
Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.
I have tested it in:
Firefox 47.0 with css.sticky.enabled=“true” under about:config
Chrome 50.0.2661.94 (64-bit) with experimental Web Platform features enabled in chrome://flags
(This is not a duplicate of How to make a sticky sidebar in Bootstrap? because that one is using BS affix)
In the stable Bootstrap 4.0.0 release, this is done using the sticky-top class...
Demo
<div class="container">
<nav class="navbar navbar-light bg-light navbar-expand">
<a class="navbar-brand" href="#">Header</a>
...
</nav>
<div class="row">
<div class="col-8 content">
Content
</div>
<div class="col-4">
<div class="sticky-top">
<h4>Sticky menu</h4>
...
</div>
</div>
</div>
<div class="footer">
...
</div>
</div>
This works even in the height of the header/navbar, content, and footer are dynamic/unknown.
https://codeply.com/go/QJogUAHIyg
I solved enabling flexbox. After raising an issue in Bootstrap's Github repository I got an answer by a Bootstrap member:
The .col-xs-4 isn't as tall as the .col-xs-8, so there's basically no
space for the Menu to "float" within when the stickiness kicks in.
Make the .col-xs-4 taller and things work fine:
https://codepen.io/anon/pen/OXzoNJ If you enable the Flexbox version
of our grid system (via $enable-flex: true;), you get automatic
equal-height columns for free, which comes in handy in your case.
Polyfill explanation.
You need to include the JS polyfill in order to use it. The polyfills recommended by the link on the Bootstrap page are
https://github.com/wilddeer/stickyfill
https://github.com/filamentgroup/fixed-sticky
Here is an updated codepen: https://codepen.io/anon/pen/zBpNRk
I included the required polyfill (I used stickyfill) and called it with
var stickyElements = document.getElementsByClassName('sticky');
for (var i = stickyElements.length - 1; i >= 0; i--) {
Stickyfill.add(stickyElements[i]);
}
The library suggested you use this for your css
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.sticky:before,
.sticky:after {
content: '';
display: table;
}
and finally you had the div order mixed up. You need to put the div with the sticky class outside of an entire row so I filled up the rest of the row with another <div class="col-xs-6"></div> that is empty.
The answer by #wrldbt works up to bootstrap 4 alpha 5, but in alpha 6 the -xs infix has been dropped and the grid have been rewritten.
I put something together, a bit cleaner, working with current version of bootstrap & also included a sticky footer using flexbox.
https://codepen.io/cornex/pen/MJOOeb
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I am wondering how to override styles of shell view being injected in Durandal inside div with id="applicationHost" ... I am trying to use common Bootstrap template (sticky footer with fixed navbar) and it works as standalone but as soon as I use it within shell.html the "wrapper" looses its auto height...
Here is my shell.html
<div>
<div id="wrapper">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="content" class="container-fluid">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
</div>
<div id="push"></div>
</div>
<footer id="footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"><p class="muted">© ABC Company Inc. 2013. All rights reserved.</p></div>
<div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>
</div>
</div>
</footer>
</div>
the nav sub-view just has standard <nav id="mainnav" class="navbar navbar-fixed-top"> and the styles are the same as on Bootstrap example page...
When I examine styles via Firebug I can clearly see that wrapper div has lost its full height...Driving me nuts! :)
I fixed this by adding the following style to my main html page after the styles necessary to get the sticky footer to work
/*durandal fixes*/
#applicationHost, #applicationHost > div
{
height: 100%;
}
The first selector takes care of the applicationHost div in the main html page and the second the one inserted by durandal (it has a class of durandal-wrapper, so you could make the selector more specific if you wanted). As you have an extra div in your shell.html file you may need the following:
/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
height: 100%;
}