Layout issues using Bootstrap grid with expandable children

Question

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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-failure">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
                            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-error">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</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">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
            <div class="testcase testcase-success">&nbsp;</div>
        </div>
    </div>
</div>

Here are some images to illustrate the issues, and the solutions I mentioned:

The Issue: Solution #1(preferred): Solution1 Solution #2: enter image description here

You might need to rephrase your question. I've had a look at the fiddle and am still not sure what you are trying to achieve. Could it be that you want the 'testcase-container' to expand horizontally to the right of your 'testsuite-heading' divs? — SeanOB, May 22 '14 at 22:30
I will put together some images to highlight the issue, and mock up the solutions I mentioned. — , May 22 '14 at 22:36

score 1 · Accepted Answer · answered Jun 05 '14 at 17:23

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.

Hey, you got +1 from me, I'll have to try that out...much cleaner than the clearfix approach (which I find abhorrent). I still prefer forcing height when possible 'cause I like all my ducks to be the same size, but when you can't, this definitely appears to be the best approach I've seen. — Kevin Nelson, Jun 05 '14 at 22:52

score 0 · Answer 2 · edited Jun 10 '14 at 03:33

0

  @media  screen and (min-width: 320px) and (max-width:1000px) {

    .testsuite{width:20%;float:left;position:relative;}

 }

http://jsfiddle.net/kisspa/Hb3Lp/1/

edited Jun 10 '14 at 03:33

user229044

232,980
40
330
338

answered Jun 04 '14 at 12:21

Kisspa

584
4
11

Agreed, looking at the fiddle it doesn't appear to have resolved the issue. – Jun 04 '14 at 16:52

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

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.

edited May 23 '17 at 11:57

Community

1
1

answered Jun 04 '14 at 22:41

Kevin Nelson

7,613
4
31
42

I was doubtful that the preferred would be an option, so it looks like I'm going to have to find a way to specify the rows, unfortunately this html is generated by razor so it should be quite the adventure. – Jun 04 '14 at 23:15
@Phaeze I haven't used Razor, but a quick glance said you can use your C# or VB of choice...so if you can implement a counter `i` that increments as you loop through the results, you should be able to do it as simply as something like: `<%= i%7==0 ? "
" : "" %>. It only gets more complicated if you want to be able to have 3 rows for -sm 5 for -md, etc., then you have to start using visible-sm and visible-md on the clearfix tags. – Kevin Nelson Jun 05 '14 at 17:16
I was able to achieve this with pure css, have a look at my answer for details. Thanks for pointing me in the right direction. – Jun 05 '14 at 17:23

score 0 · Answer 4 · answered Jun 05 '14 at 12:35

0

why you won't use position:absolute for .collapse class? like this?

http://jsfiddle.net/fX63M/9/

CSS

.testcase-container {
 position:absolute;
 z-index:100;
}

FullScreen http://fiddle.jshell.net/fX63M/9/show/

answered Jun 05 '14 at 12:35

Ravimallya

6,550
2
41
75

I do believe that makes things worse as the elements will overlap with that. – Jun 05 '14 at 16:20
if u want to get as exactly as preferred solution one, you might need to go for jquery. You can style `.testcase-container` class with background color, border, box shadow etc. so that it won't mess, i feel. – Ravimallya Jun 06 '14 at 05:45

Layout issues using Bootstrap grid with expandable children

4 Answers4