In the main content area of this page, I'm using the responsive grid provided by Bootstrap. I want the table to occupy a column than takes up 75% of the page width and the filter to occupy the remaining 25%, so I've marked it up like this:
<div class="row-fluid">
<div class="span9" id="table-container">
<!-- table markup goes here -->
</div>
<div class="span3">
<!-- filter markup goes here -->
</div>
</div>
But for some reason the table is horizontally overflowing it's parent element (with ID table-container) and extending into the column that shows the filter.
table-layout:fixed will fix the problem, but you will need to set your columns' width, which might prove troublesome in a responsive context.
Related
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
I need to make my bootstrap column span the full height of a row. The issue i am having is that I cannot get it to change size.
currently my HTML looks like this
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<!-- Content removed for demo | large form here -->
</div>
</div>
</div>
The col-sm-11 contains a form which is x height (around 400/500px)
the col-sm-1 contains no content but I want to make it 100% height so it matches the form next to it. How do I go about doing this
Attempts
I have tried applying height 100% to that column but it remains the same.
I have also tried setting a static amount like 300px but this just pushes the form down. and i need it to be 100% anyway
The easiest way I can think of for you to do this is to use one line of jQuery, if possible.
Add a class, two separate ones, to each of your two columns.
<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>
In jQuery, simply add this line of code at the top of your $(document).ready(function() {...});
$('.col1').height($('.col2').height());
Here is a JSFiddle
Note: I made your col-sm's col-xs's so that you could see it in JSFiddle without resizing.
Note #2: You may want to put the line of jQuery inside of a $(window).resize(function() {...}); so that it changes with the responsiveness.
I am basically a back-end developer who has very less information about the front end.
So basically I have left sidebar and right main content type layout in bootstrap. Now I want to take whole width remaining as a main content (total width- left sidebar width), in Bootstrap 3.
Any suggestion?
Use grids, it is simple. In short: your screen is divided in 12 columns and you say how much columns to occupy.
<div class="row">
<div class="col-lg-3">
Sidebar goes here
</div>
<div class="col-lg-9">
Main content
</div>
</div>
Heads up: to be full screen width try put it as first child of the
When Bootstrap is used, the class col-**-12 will give full width. (where ** can be any size)
http://getbootstrap.com/css/#grid
i'm trying to get a row cut into three segments following the below premises:
First segment must have a max-height and always stay on top (min-height:0; max-height:40%). Minimum height can be 0. Scroll must appear if content doesn't fit max-height.
Third segment must be placed on bottom (no fixed height). Height must be inherited from its content.
Second segment must expand 100% of the remaining height. Scroll must appear if content doesn't fit remaining height.
I've tried with the following code https://gist.github.com/anonymous/24809e7b981f4ca7e6fb but the problem i'm experiencing is the middle/second segment expands to bottom overlapping the third segment.
Does anyone know how should i proceed? Thx
This might work:
<div class="row">
<div class="first-row" style="max-height:40%;scroll:auto;"></div>
<div class="second-row" style="height:100%;"></div>
</div>
<div class="row">
<div class="third-row" style="position:absolute;bottom:0;">
</div>
I'm currently reading a book about Bootstrap, Publications O'REILLY
It seems nesting a fluid grid is a little different: Since we are using percentages, each row resets the column count to 12. For example, if you were inside a Span8, instead of
two span4 elements to divide the content in half, you would use two span6 divs (see
Fluid Grid System | 5 Figure 1-4).
This is the case for responsive content, as we want the content to fill 100% of the container:
<div class="row-fluid">
<div class="span8">
level 1 of column
<div class="row">
<div class="span6">
Level 2
</div>
<div class="span6">
Level 2
</div>
</div>
</div>
</div>
My question is, why instead of using two span4 of span6 should we be content to fill 100% of the container?
Because grid span width is calculated based on the entire grid width, not the parent span of the element in question.
Imagine a scenario where you have 3 or 4 levels of nesting. width calculations would get very complex. By keeping everything relative to the grid's outer structure, both visualization and the CSS itself remain simplified.