Bootstrap 3.0 Affix with List Changes Width

Bootstrap 3.0 affix with list changes width

I had the same problem and fixed with this:

 $(window).resize(function () {
$('#category-nav.affix').width($('#content').width());
});

basically in an event of resize I calculate the content div's width and set the width of affixed element to that.

Twitter bootstrap 3: Navbar changes width when affix fires

You can't solve that. The problem is the position: fixed;. The Navbar will be rendered by the browser without left or right property.

You can only solve the issue with three things:

1. Use absolute positioning.

Use position: absolute; and change the top value on scrolling with jQuery. disadvantage: You need a Javascript-part for that.

2. set left/right

Set a left: ?px; or right: ?px

3. define a special width

Set a min-width: ?px; and/or max-width: ?px; for each media-query

Bootstrap Affix Changing List Item Width

After some research, I've figured out what the issue is.

  1. Before the affix kicks in, the width is inherited from the 'span3' div with parents my affixed nav.

  2. After affix kicks in, that affixed nav is removed from that parent which is why it's losing it's width. The affix plugin basically rips it out of the DOM and places the affixed element manually on top.

The solution is to manually give the .affix class a width. In my case, I've given it a width that simulates a span3 parent.

.affix {
position: fixed;
top: 20px;
width: 190px;
}

span3 is 220px width, with 15px padding on both left and right. So my putting the above CSS has worked.

If you have multiple affixes, you'd have to properly select and apply the different widths.

Twitter Bootstrap affix element width rolling out from parent element borders

As stated in the docs..

"you must provide CSS for the positioning and width of your affixed
content"

Of course, it all depends on what you think "look nice". Here's an example forked from you Bootstrap. Notice the #myAffix.affix CSS used to control the position of your panel.

http://bootply.com/RUiDxG0OqI

Bootstrap 3 affix with grid columns

It's a z-index problem

Just add this css--

 .affix {

z-index:100;
}

Working Example

<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">          <style>  .affix {      top: 0;      width: 100%;      z-index:100;  }
.affix + .container-fluid { padding-top: 70px; } h1 { color:darkred } </style></head><body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Bootstrap Affix Example</h1></div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Basic Topnav</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul></nav>
<div class="container"><div class="row"><div class="col-md-12"> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1></div></div></div>
</body></html>

Bootstrap contents moves over affix

Just add z-index: 10; to your affix-css like i did here:

.affix {
top: 0;
width: 100%;
z-index: 10;
}

this should solve your problem :)

Working solution: https://jsfiddle.net/707n3r21/3/

if you want to learn more about z-index you should take a look at this
documentation: http://www.w3schools.com/cssref/pr_pos_z-index.asp


// EDIT :

To solve your other problem change the width of your affix-css to 66.66666667%. Thats the same width like the width of col-lg-8 (bootsrap.css)

.affix {
top: 0;
width: 66.66666667%;
z-index: 10;
}

Working solution: https://jsfiddle.net/707n3r21/4/


// EDIT:

For smaller screens add this to your css:

@media (max-width: 1199px) {
.affix {
width: 100% !important;
}
}

Now we should have fixed it all:
https://jsfiddle.net/707n3r21/10/



Related Topics



Leave a reply



Submit