I created a responsive table with bootstrap 3.3.2
The issue was the presence of horizontal scroll bar always at the bottom of the table.
As per the below link
https://github.com/twbs/bootstrap/issues/10711
I used container-fluid in table so the issue resolved in Crome but in IE it is still showing.
Any idea to remove horizontal scrollbar in IE when it reaches 100% width?
change the class row by container-fluid
<div class="container-fluid">
<div class="col-md-3">
<div class="sectionLeft">
Sidebar Content
</div>
</div>
<div class="col-md-9">
Test content
</div>
</div>
Related
I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:
I implemented this with:
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
The problem now is that when I have other elements than the <dashboard/> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding overflow: auto; but that doesn't work
Apply height or max-height for hero-body and then apply overflow: auto;. May be you can hide overflow-x(overflow-x:hidden) and apply scroll only vertically by overflow-y:auto.
I've asked similar question here: CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first), but that's one is more difficult, I find out that I can't use overflow hidden for it because there are popup in elements. Here description: I have several containers and need shrink only first div if not enough space for all of them, here example which works perfectly for me in Firefox and Chrome, but not in IE: https://plnkr.co/edit/Fg5P96r75soAVlDUf1LG?p=preview:
<div class="container">
<div class="container2">
<div class="first">first div content</div>
<div class="second">second div content</div>
</div>
<div class="third">third div content</div>
</div>
Is there any simple solution to fix it in IE 11?
Are there any built in css classes in jQuery Mobile for horizontal positioning? In Bootstrap, the screen is divided by 12 columns, and elements can be aligned based on them. Example: "col-md-2". http://getbootstrap.com/examples/grid/
I want it to be fairly responsive in design. At the moment I'm thinking of using divs and set the "css width" to a percentage..
Take a look at jquerymobile responsive grids: link
code:
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">Column A</div>
<div class="ui-block-b">Column B</div>
<div class="ui-block-c">Column C</div>
</div>
I have a simple two column responsive design with Skeleton boilerplate.
For the sidebar I have this div, inside a container div:
<div class="container">
<div class="four columns">
/* logo and menu */
</div>
<div class="nine columns post">
/* contents... */
</div>
</div>
I like the way it looks in wide viewports and how it's stacked on narrower ones, but I'd like to have the sidebar (four columns div) in the wider sizes always fixed at the left, while scrolling the content of the other div.
Tried several things but it ends screwing up the responsive layout, I guess I don't have a thorough knowledge of CSS positioning...
Any help is appreciated!
Thanks.
I read that you are using the Skeleton Boilerplate.
I recommend that you put your logo and menu in a <nav>element. When closing </nav>, insert a non-breaking space ( ). This non-breaking space will hopefully fix your problem!
<div class="container">
<div class="four columns">
<nav>
/* logo and menu */
</nav>
</div>
<div class="nine columns post">
/* contents... */
</div>
The next thing to do is to go to your CSS file and insert:
nav{ position:fixed; width:220px; /*found the width-info on Skeleton website*/ }
Let me know if it worked out for you!
For that you need to have a "sticky" div
Try using waypoints
I tried to setup a navbar which is always at the very left of the screen, and a main container which is always right of the navbar. Currently it is always below the navbar. The main container (titled with dashboard) should always be right of the navbar, even if the screen is too small. In the main container there is currently only one table shown. The width of this table should be fluid.
Here are my jsfiddle resources:
Source
Result
It would be great if I could set the width when the main body is not shrinking anymore, something like a min-width for the main container.
Would appreciate any help.
Sidebar must be inside the container to get it and the "dashboard" side by side.
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<!--Sidebar content-->
</div>
<div class="span8">
<!--Dashboard content-->
</div>
</div>
</div>
To prevent resizing under certain screen sizes, just get a custom Bootstrap here, unchecking that sizes you don't want to support.