0

I have created two Views Blocks "NEWS" and "BLOG", which resides side by side on my front page.

Both the views have 20 contents (but can be any number) in it and a pager. How do I display contents in views block, so that the both views end up with equal height regardless of number of contents displayed.

  • Displaying dynamic number of contents in views? why do you think this is off topic? – shrish Mar 31 '14 at 16:46
  • @Rupesh Since there is a module that could be used, I would leave the question open, as there is a Drupal-specific answer. The suggested module cannot be used on WordPress, so the answer is not as generic as merely using CSS styles. – kiamlaluno Mar 31 '14 at 17:31
  • This would normally be a HTML/CSS question, but one of the answers that was here by the time I handled the flag pointed to a Drupal-specific answer that may serve future readers, so I am going to leave it. – mpdonadio Mar 31 '14 at 17:31
2

Try using the equal heights module

This module implements a jQuery Equal Heights plugin that can equalize the height of the elements of the specified class.

To use it, give the elements the same class, then go to the administration interface and add this class (separate multiple classes by a space). By default, it sets the height to the height of the tallest element but you can also specify minimum and maximum height.

To use the just give both the blocks the same class and add the admin name in the admin interface of the module and then js will do the rest.

  • 1
    You may need to combine this with Block Class to get the classes onto the blocks that views creates. – mpdonadio Mar 31 '14 at 17:29
  • @MPD "equal height" + "Block class" great solution Thank you. – shrish Mar 31 '14 at 18:14
1

Installing module to achieve small task is bit too much in my opinion. I would rather apply equal heights JS library https://github.com/mattbanks/jQuery.equalHeights and following script to the main JS file.

$('.yourelements').equalHeights();

This function will calculate the tallest container of the N-containers and apply in-line css height attribute to all the containers to match equal heights. So you don't have to set height as you can't predict the actual height.

0

Get the css ID of blocks using Firebug write css like

#block-search-form, #block-system-navigation {
    height: 200px;
}
0

If you don't want to use a Module or Plugin I completed this with Jquery. Your views need to have the same class and the below simply looks at each of them, decides which one is higher and sets both their height to the highest value.

  function equalHeight() {
   var height = 0;
   var $items = $('.item-blocks');
   $items.each(function() {
    if($(this).height() > height) {
      height = $(this).height();
    }
  });

  $items.css('height', height);
 }

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.