- Recent posts
- How to Customize a Drupal Web Site
- How to Search for Drupal Themes, Modules and Information
- How to Check if a Theme supports Local Changes
- How to Customize a Site's Appearance by Creating a Sub-Theme
- How to Make Changes to a Drupal Theme
- Inserting & Using PHP in your Drupal Site's Content
- The basics of using Java Script in Drupal
- How to Create a Basic Drupal Module
- Creating a Custom Ubercart Import / Export Module
- Configuring your site for https when on cart pages
- Configuring the MediaFront Open Standard Media (OSM) Player
- How to Create Pages Only Customers Can See
- How to Handle Comment Spam & Offensive Postings
How to get Equal Height Panels Columns, Blocks and other Page Elements
The Panels module is my favorite method for creating complex page layouts. Apparently, many web site developers using Panels seem to have issues getting layouts with equal heights in their columns. There are at least two easy methods to solve the issue, both of which require understanding a bit about the CSS divs, classes and id Panels creates to contain your Panels columns. This same idea can also be generalized to a method for equalizing the heights of any page elements.
The technique demonstrated above is quite easy, if the user adding content has access to edit the theme's CSS file. In many situations, that is not an option. For cases where editing of the theme's CSS is not possible, the Equal Heights JQuery module can be used. Using the Equal Heights JQuery module is pretty much the same procedure: the user adding the content creates Panels Regions with the same CSS class they want to have matching heights, then the Equal Heights JQuery module provides a page at admin/settings/equalheights where the user can enter the name of the CSS class they used for their Panels Regions:
The interface at admin/settings/equalheights provided by the Equal Heights JQuery module
A nice aspect of this method is its general application; any nodes, blocks, and other page elements where you have control to provide a CSS class name is able to have height alignment handled more or less automatically. However, this does have a few drawbacks:
- Users adding such content must have access to the Equal Heights JQuery administration page;
- Users with such permissions need to have general CSS knowledge, as well as understand class naming quidelines to insure their CSS class names all have unique names;
- If the content being aligned is not a simple case such as aligning two nodes, instead it is two short nodes in one column and a single taller node in a column next door. Something like this:
Creating column content and layouts such as above is typically only available to site administrators, so the need to edit the theme's CSS is not unreasonable. Although I have not tried it yet, I hear the Skinr module may be a solution in this type of situation.
That pretty much wraps this tutorial up. If you find your situation requires the modifying of theme CSS files, and you are inexperienced in theme CSS modification, I suggest you read my tutorial on making changes to a Drupal theme. It walks you through finding the CSS definition to make changes, and where you should save your over riding changes for maximum flexibility.
If you have any questions related to this tutorial, or would like a clarification in an area, please write a comment.
(C) Copyright 2011 by Blake Senftner, All Rights Reserved.
Comments
great post, do you have css
great post, do you have css examples of how to accomplish making equal panel heights? i've been googling for over an hour and haven't found anything to work.
No I don't have an example
No I don't have an example handy. However, you should just be able to loop at your page in FireBug and figure out which elements need to have height properties set to equal values. That's what I did before I learned of the Equal Heights module.
Post new comment