Reputation:
Layout issues using Bootstrap grid with expandable children
My question is potentially related to this question but I'm unclear as the layout given is single column and there are no expandable elements.
I have a web page that consists of a bootstrap panel which contains a number of expandable elements in a fluid grid setup, the problem I'm having is that when expanding one item in a given row (as long as it is not the last row) will push the entire next row over, which potentially leaves a large amount of white space at the beginning of that row.
Here is a fiddle demonstrating the issue (Click on TestSuite3)
Edit: You may need to expand the html render area until the test suite elements are laid out in two rows.
I would like to have either the entire row expand along with the collapse or allow the white space to be filled by the elements (essentially splitting the row). I'm leaning towards the latter as its possible for one of these sections to be quite tall.
The html for the fiddle:
<div class="panel panel-default panel-info">
<div class="panel-heading">Latest Run</div>
<div class="panel-body">
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse1">
<div class="testsuite-heading">Test Suite 1</div>
</a>
<div id="collapse1" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse2">
<div class="testsuite-heading">Test Suite 2</div>
</a>
<div id="collapse2" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse3">
<div class="testsuite-heading">Test Suite 3</div>
</a>
<div id="collapse3" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse4">
<div class="testsuite-heading">Test Suite 4</div>
</a>
<div id="collapse4" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse5">
<div class="testsuite-heading">Test Suite 5</div>
</a>
<div id="collapse5" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse6">
<div class="testsuite-heading">Test Suite 6</div>
</a>
<div id="collapse6" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-failure col-md-2">
<a data-toggle="collapse" href="#collapse7">
<div class="testsuite-heading">Test Suite 7</div>
</a>
<div id="collapse7" class="testcase-container collapse">
<div class="testcase testcase-failure"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-failure"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-error"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse6">
<div class="testsuite-heading">Test Suite 6</div>
</a>
<div id="collapse6" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
<div class="testsuite testsuite-success col-md-2">
<a data-toggle="collapse" href="#collapse8">
<div class="testsuite-heading">Test Suite 8</div>
</a>
<div id="collapse8" class="testcase-container collapse">
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
<div class="testcase testcase-success"> </div>
</div>
</div>
</div>
Here are some images to illustrate the issues, and the solutions I mentioned:
The Issue:
Solution #1(preferred):
Solution #2:
Upvotes: 1
Views: 1547
Answers (4)
Reputation: 584
@media screen and (min-width: 320px) and (max-width:1000px) {
.testsuite{width:20%;float:left;position:relative;}
}
http://jsfiddle.net/kisspa/Hb3Lp/1/
Upvotes: 0
Reputation:
In the end and with help from the question linked by Kevin Nelson, I was able to come up with a workable method to achieve solution #2 from the question with css:
@media (min-width: 768px) and (max-width: 991px){
.panel-body > .testsuite:nth-child(3n + 4) {
clear: both;
}
}
@media (min-width: 992px) and (max-width: 1199px){
.panel-body > .testsuite:nth-child(4n + 5) {
clear: both;
}
}
@media (min-width: 1200px) {
.panel-body > .testsuite:nth-child(6n + 7) {
clear: both;
}
}
And the html to make use of the different sizes is now:
...
<div class="testsuite testsuite-success col-md-3 col-lg-2 col-sm-4">
...
Within each nth-child pseudo element, the number before the n is the number of elements per row and the addition is to fix the next element that should be a first row (x + 1).
Also the media queries are designed to match the ones Bootstrap uses.
Upvotes: 1
Reputation: 6610
why you won't use position:absolute for .collapse class? like this?
CSS
.testcase-container {
position:absolute;
z-index:100;
}
FullScreen http://fiddle.jshell.net/fX63M/9/show/
Upvotes: 0
Reputation: 7673
I think this might be more related to your problem. I apologize if I've misunderstood.
bootstrap grid not working as expected
Personally, for wrapping layouts, I prefer forcing a certain height (if possible) and hiding overflow. However, sometimes this isn't practical, and you need to use some clearfix solutions, or wrap each row in its own .row tag.
Edit: I don't see a way that would allow your "preferred" solution to work without hard-coding the UI.
Upvotes: 0
Related Questions
- Bootstrap nested grid layout
- Bootstrap 4 Grid - Children in column do not respect width
- Bootstrap grid layout issue - does not work as intended
- Bootstrap grid layout not working as expected
- Why is Bootstrap not respecting my grid layout?
- Grid system issues in Bootstrap 3
- Bootstrap Grid Layout
- Nested bootstrap grid - layout issue
- Grid layout using Bootstrap 3.0
- Twitter Bootstrap grid not working as expected