I have a layout with bootstrap in there are 3 rows wrapped in a flex col, like this:
<div class="row" style="height:100vh;">
<div class="col d-flex flex-column">
<div class="row">...</div>
<div class="row flex-grow-1">
<table>
...many rows...
</table>
</div>
<div class="row">...</div>
</div>
</div>
The first row inside flex col will be up, the second will use all the space between, and the thirth will be at bottom. In the second row I want to put a table with many rows, and contain the table inside to make somthing like a "window" to see the content of the table, scrolling the table.
But, the second div grows with table content, I tried to wrap the table inside a div and setting max-height to 100% but always the flex row grows due the table content.
¿How can I make the flex row scrolling its table inside but taking the max avalaible space of its parent with fixed height?
It should work like this with max-height and overflow-auto...
<div class="row">
<div class="col d-flex flex-column vh-100" style="max-height: 100vh">
<div class="row">
top row
</div>
<div class="row flex-grow-1 overflow-auto">
<div class="col">
<table>
<tbody>
<tr>
<td>table row</td>
</tr>
..
</tbody>
</table>
</div>
</div>
<div class="row">bottom row</div>
</div>
</div>
https://www.codeply.com/go/v6AH817CoZ
Related: Bootstrap 4: Scrollable row, which fills remaining height
Related
I have an angular webpage using Angular Material and Flex-box. This page will have a graph that retains its ratio and therefore has a max-width set to prevent it from taking up too much vertical space. I want to set the parent div of the graph to only take up as much horizontal space as the child element. I will fill the rest of the horizontal space with a div that has fxLayout column and will stretch vertically.
Currently
<div fxLayout="row">
<div fxLayout="column" fxFlex>
<app-graph></app-graph> //max-width: 1300px
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex="30" style="background-color: red;">
</div>
</div>
Update
I am getting closer. I found setting the fxFlex="0 1 1300px" gives me the behavior I want of the first div. I can't figure out what to do for the 2nd div so that it continues to fill the remaining space.
<div fxLayout="row">
<div fxLayout="column" fxFlex="0 1 1300px">
<app-graph></app-graph>
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex="20" style="background-color: red;">
</div>
</div>
This is what I came up with to get what I wanted. Still not perfect, but it retains the min and max size of the first component.
<div fxLayout="row" fxLayout.lt-md="column" fxLayout="start stretch">
<div fxLayout="column" fxFlex="0 1 1100px" style="margin: 0 5px;">
<app-graph></app-graph>
<app-results></app-results>
</div>
<div fxLayout="column" fxFlex style="border: black solid 1px; margin: 0 5px;">
<p style="font-size: 4em">Stuff will go here</p>
</div>
</div>
I have a two column bootstrap page as shown below. The left contains two rows (an image and a bordered bit of text below the image that fills the whole column width), the right is login details.
The image is 700px wide, and for smaller devices or screen widths I change to a smaller image. This all works fine. However when I resize the browser the right login column overlaps the left column's 700px image by about 40 pixels before it snaps to a single column.
I tried to fix this by putting in a minimum width for the left hand column like this:
<div class="col-md-8" style="min-width: 768px">
Which worked and it snapped correctly, however on doing so the left hand side main bordered text (that is a row below this image) then became fixed width and did not resize.
How can I get it so the two columns do not overlap and the text still flows in my bordered text.
thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<DIV class="row">
<div class="col-md-12">
<img class="loginPic hidden-xs" src="images/pic.png" >
<img class="loginPic visible-xs" src="images/pic-small.png" >
</DIV>
</div>
<br />
<DIV class="row">
<div class="col-md-12">
<div style="border: 1px solid #00549d; border-radius:10px;">
<div style="padding:20px;font-size: 13px;">
<p>Lots of text.</p>
</div>
</div>
</div>
</DIV>
</div>
<div class="col-md-4 pull-left" >login stuff here</div>
</div>
</div>
I am trying to include a bootstrap grid inside another grid and make sure it is still responsive but on larger screens the child grid doesnt collapse.
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<!-- child grid -->
<div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-md-6">column content</div>
</div>
</div>
</div>
</div>
bootsplay link: http://www.bootply.com/PCMV1BF4YF
the child grid should collapse in larger screens because the width of the parent class is already small. Is it possible to get around this issue?
Inner col-*-* should also be contained in a row. Read the Bootstrap docs on nesting
<div class="container">
<div class="row">
<div class="col-md-6">First column content</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-6"><img class="img-responsive" src="http://placehold.it/350x150"></div>
<div class="col-lg-6">Second column content</div>
</div>
</div>
</div>
</div>
Make the inner grid col-lg-* if you want it to stack/collapse before the outer grid does. The breakpoint (when the columns stack) depends on the viewport width, not the width of the parent container.
Also, instead of overriding the Bootstrap container, use a custom class.
http://www.bootply.com/aoUZozmcsc
Suppose you have a two-column layout using Twitter Bootstrap, in which you want to have specific rows vertically aligned with each other:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Column 1</h2>
<p>Optional content of variable height.</p>
<p><strong>Align this vertically...</strong></p>
</div>
<div class="col-sm-6">
<h2>Column 2</h2>
<p><strong>...with this</strong></p>
</div>
</div>
</div>
Vertical alignment is feasible with table layouts, however, sizing and responsive behaviour of Bootstrap's columns is lost:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="container">
<table class="row">
<thead>
<tr>
<th scope="col"><h2>Column 1</h2></th>
<th scope="col"><h2>Column 2</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>Optional content of variable height.</p></td>
</tr>
<tr>
<td><strong>Align this vertically...</strong></td>
<td><strong>...with this</strong></td>
</tr>
</tbody>
</table>
</div>
Another option is to split rows, however, the layout folds in wrong order on smaller resolutions.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Column 1</h2>
</div>
<div class="col-sm-6">
<h2>Column 2</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Optional content of variable height.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong>Align this vertically...</strong>
</div>
<div class="col-sm-6">
<strong>...with this</strong>
</div>
</div>
</div>
How do you achieve the same result while still maintaining the behaviour of Bootstrap's columns? Is using table layout the way to go or is it a dead-end? Is it otherwise possible without resorting to JavaScript to position a row to a computed offset?
EDIT: I aim to have the top of the rows aligned as is the case in the table layout.
For what I know, I would test these solutions.
Solution 1 : Using Javascript (Jquery if you want) to detect the height of the left and the right div, and to tell them to have the same height.
You can apply this solution on the second content div to make the espace above your bold text having the same height.
Or to add.. for example as margin-top as needed in the smaller div (with bold text which need to be aligned) after comparing the heights of both.
Anyway, if you have both of theirs heights you will have enought informations to find a way. Multiples solutions are possible here, I let you find the better one for your context and needs.
<div class="container">
<div class="row">
<div class="col-sm-6 leftcolumn">
<h2>Column 1</h2>
<div class="astallas"><p>Optional content of variable height.</p></div>
<p><strong>Align this vertically...</strong></p>
</div>
<div class="col-sm-6 rightcolumn">
<h2>Column 2</h2>
<div class="astallas"></div> // make this empty div have the same height that the left one with variable content
<p><strong>...with this</strong></p>
</div>
</div>
</div>
Solution 2 (but with some browsers incompatibilties) : Use Flexbox <3 which is a native CSS3 fonctionnaly that give you a easy way to have your wanted divs' positions.
http://flexboxfroggy.com/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think that both of these works with bootstrap and will respect responsive needs.
You can do something like this to get rows of equal heights:
<style>
.centered {
text-align: center;
font-size: 0;
}
.centered .myheight{
float: none;
display: inline-block;
text-align: left;
font-size: 13px;
vertical-align: top;
margin-bottom: 5px; /*add this if you want to give some gap between the rows. */
}
</style>
<div class="container-fluid">
<div class="row centered">
<div class="col-sm-4 myheight">
Some content
</div>
<div class="col-sm-4 myheight">
Some content ...<br>
Some more content
</div>
<div class="col-sm-4 myheight">
Some content
</div>
<div class="col-sm-4 myheight">
Some content
</div>
</div>
</div>
I need to create a list of divs as looking like below sample:
I'm using Bootstrap grid system and augularjs. I create divs dynamically, using angularjs ng-repeat directive.
What I want is an endless list of divs containing attribute 'class"col-md-2"' inside a div containing attribute 'class"col-md-12"'. Then I want to use a scrollbar to scroll all the divs in the outer div.
Example code:
<div class="col-md-12" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
This doesn't work and "off course" is creating new rows each time ng-repeat is creating a div.
How do I prevent that from happen?
I solved the problem like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 col-xs-11" scrollablehorizontal>
<table class="borderless">
<tbody>
<tr>
<td ng-repeat="newviews in newviews" valign="top" class="shadowbox" scrollableverticall>
<p>
all the things...
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-1"></div>
</div>
</div>
in a col-md-12, there can be 6 x col-md-2 after that there is a linebreak.
try to change "col-md-12" to "row-fluid"
<div class="row-fluid" scrollablebar>
<div ng-repeat="newview in newviewslist" class="col-md-2">
Here goes the date from newview...
</div>
</div>
and add css:
.row-fluid{
white-space: nowrap;
}
.row-fluid .col-md-2{
display: inline-block;
margin-left:10px;
}
jsfiddle