1

In the front page of our website, I would like to list down groups led by researchers and each group is having a thumbnail picture and a title where the picture is of fixed width/height but, the title is not (could be small or large - title appearing a the bottom of the image).

For some reason the grid is not displaying properly and I feel like it is due to the big/small titles of the groups which cause this issue. Column heights could be an issue.

My settings are as follow:

Drupal 7 Views 3 (Block and/or Page) Unformatted Fields

http://www.bootply.com/wtGxTJjXva (I have 18 divs and they have to be divided into six in each row but, it does not) - could anyone point out what I am missing?

enter image description here

According to the image, first row and last column is showing two divs rather than one and in second row I got three divs squeezing into single column.

1

You should use 'Bootstrap Grid' format for Views in some cases, which you'll be able to select after install/enable of the Views Bootstrap module. Here is a quote about this module (from its project page):

... enables you to create components following the theme structure of the Bootstrap framework all within the configuration settings of the powerful Views module.

  • Great suggestion Peter! +1 from me ... – Pierre.Vriens Jun 5 '15 at 15:43
0

I couldn't find a proper solution to this issue however, fixed the problem with giving each div (within row class) a height of 200px and it perfectly organized everything.

I can use viewports to assign an appropriate height (than 200px for all displays) for different views.

0

I had the same problem and had tried jQuery/Javascript solutions or CSS. I ended up using the module Views Responsive Grid. For a two column grid layout I edited the View and used these settings:

 Format: Responsive Grid
 Number of columns: 2
 Column classes: views-column col-sm-6 (for every column)
 Row classes: views-row clearfix (for every row)

In your case, since you want t 6 column grid, you would use the following settings for the Column Classes:

 views-column col-sm-2

I hope this helps!

0

If you list the items in a for/foreach loop, add

<div class="clearfix"></div>

at after each 6th item. For example

$items = array(...);
$j = 0;

foreach($items as $i){
    if(++$j % 6 == 0){
        echo '<div class="clearfix"></div>';
    }
    echo '<div class="col-md-2">' . $i['key1'] . '</div>';

}

Thus, your items will be in order.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.