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.
Related
I am using bootstrap. I have two columns (col-lg-6) inside container. Left side has regular text. Right side column has an image. According to design requirement, image that is inside right side column should stretch and touch the right side of screen and should not be contained inside the column. I cant use image as background. Image should be there in column so that it takes proper height inside column but it should stretch to the end of screen (viewport) to the right. How can it be achieved?
<div class="container">
<div class="row">
<div class="col-lg-6">
...text
</div>
<div class="col-lg-6">
<img>
</div>
</div>
</div>
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 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>
I'm working on a site using the Bootstrap 3.0 framework. I'm trying to get a kind of half border effect where there is a different background for the header and left navigation that wraps around the top and left of the page while the main content would have a darker background that extends from the left navigation infinitely to the right. I have the main content wrapped in a container and I know I'm able to extend backgrounds infinitely to the left and right by placing the content div inside of a div or other element and making that element's width 100% but how would I do this with a specific column that is already inside of a row? The main content is in a row that also has the navigation on the left. The site can be found here... http://jacobbuller.com/testsites/derekdavis/index.html
Please let me know if you have any suggestions!
--- EDIT ---
I'm trying to explain this a little clearer.
Here are two images showing what I have now and what I would like...
Basically I have a the header tag at 100% width and then inside of that I have the content wrapped in the container class to make sure it's center on the page. This way I can make the top header have a different background then the rest of the image. The rest of the page is made up of two columns wrapped in a container div. The problem I am having is making the background for the main col on the right expand 100% to the right. Here is what I would like it to look like...
I want the background of the main content col to extend 100% to the right to give the impression that it's being framed by the top header and left navigation.
Here is a short version of the header...
<header>
<div class="container">
<div class="row">
</div><!--End row -->
</div><!--End container -->
</header>
And the main content...
<div class="container">
<div class="equalHeights-sidenav"><!--equal heights JQuery so left nav is same width as main content -->
<div class="row">
<div class="sidebar-offcanvas col-xs-12 col-sm-3 col-md-3 col-lg-3">
</div><!-- End col -->
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 content">
<div class="row"><!-- start main content row -->
</div>
</div>
There are more rows and col in the main content div but these are the two main divs surrounded it. Let me know what you think the best course of action is... if it's possible at all that is.
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.