I am using bootstrap 3.3.5, jquery 1.11.3 and the affix script to try to keep my navigation bar at the top of my screen at all times. It has been working well except when I try to add columns with the col-xs-* and col-md-* classes.
For example it scrolls fine with multiple containers in rows like this:
<div id="container" class="container-fluid">
<div id="about" class="container-fluid">
<!--some information here, it scrolls fine-->
</div>
<div id="resume" class="container-fluid">
<div class="container-fluid">
<!--seemingly the problem has to do with using the xs and md tags-->
<div class="row" style="background-color:lavender;">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lavenderblush;">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
</div>
<div id="projects_sidescroller" class="container-fluid">
<!--this one scrolls fine as well-->
</div>
I have set up a jsfiddle link with the problem present. When you scroll down to the coloured table, it's text will display on top the navbar instead of hiding below it. https://jsfiddle.net/mhjyw37d/
Add z-index to your affix class.
Like:
.affix {
top: 0;
width: 100%;
z-index: 999;
}
Related
I have a widget like this:
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-12">
1
</div>
<div class="col-md-4 col-xs-12">
2
</div>
<div class="col-md-4 col-xs-12">
3
</div>
<div class="col-md-4 col-xs-12">
4
</div>
</div>
I am embedding the above widget like this
<div class="container">
<div class="col-md-12">
<div class="col-md-3 embedWidget">
<!-- embeeded-widget-comes-here -->
</div>
<div class="col-md-9">
<!-- some other imp content here -->
</div>
</div>
</div>
When I do this my widget is showing as 4 column grid, But I want it to be stacked format (mobile view col-xs), for all responsive widths
how can I achieve it
I tried with width 100% to embedWidget (content is fixing in that area as 4 col grid)
Why don't you put 100% width on embedWidget for media query for smaller devices.
Hello friends I have one question about bootstrap, this is my html I have the following structure
<div class="container-fluid">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
How could I get that only "col-md-8" can scroll down? I want that col-md-4 can be shown always and doesn´t scroll down like a fixed menu but I haven´t a fixed menu in col-md-4
Thanks
A simplest way to get it is follow:
.frm {
overflow: auto;
max-height: 100vh;
}
.content {
height: 200vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
col-sm-4
</div>
<div class="col-sm-8 frm">
<div class="content">some content</div>
</div>
</div>
</div>
You may not fix height of .content. It will work anyway
I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
I'm designing a multi filed search bar for a new website. The website is made in PHP/Javascript/Bootstrap
I need to create 4 fields (3 text field + 1 search button) and they should be aligned in a
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
..here the fields plus button...
</div>
</div>
How can I do that? I tried form-inline but this is the result:
If you do not have particularly problematic requirements like old browser support, you could have fun with Flex.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to distribute until 12 cols and center your div like:
Change Your code:
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
..here the fields plus button...
</div>
</div>
For:
<!--Adding some styles for center the row-->
<div class="row" style="margin: 0 auto; display:block; width: 100%;">
<div class="col-lg-2">Field One</div>
<div class="col-lg-2">Field Two</div>
<div class="col-lg-2">Field Tree</div>
<div class="col-lg-6">Your search field</div>
</div>
Please see this for: http://getbootstrap.com/css/#grid more about it.
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.