Drupal Panel Pane Empty Left Pane Collapses

Sunday, March 03rd, 2013
Last Updated:
Sunday, March 03rd, 2013

Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service

Ever have a Drupal project using panels, setup with regions or columns, where there's a "left" pane and a "right" pane? Then when you add stuff to the right pane, it automatically shifts over to the left collapsed pane? Isn't that a huge pain in the back panel??

In my opinion, from a logical standpoint, panel panes should respect the columns regardless of whether something is in it or not. Am I wrong? It's like buying a house on a plot of land but building your house on the plot that's next to yours, just because there isn't a house there... even though you don't own that land... My point is, anything you put in the right column or region, should stay in that respective column or region and not automatically collapse over to the left pane that's empty.

Well, the fix is actually quite simple!! (A very quick CSS tweak)

1) The first thing you need to do is figure out which panel layout you're using. I personally leave mine set to "panel-flexible" and go from there. Every panel variant is built from scratch.

2) Once you figure out which panel layout(s) you use, simply add the CSS class for each layout, followed by the "inside" class and give it a minimum height.

Like so:

.panel-flexible .inside {
  min-height: 1px;

What's happening is that the pane doesn't have any data to create a height for the div surrounding the empty pane. This causes the div to collapse and from what I can tell, it's how the W3C has designed it to be. (No data = no height = no box) Giving the pane a single pixel of high will re-open the box and shift things around like you would expect.

One downside to this fix is that min-height is not supported by older browsers like IE6. (Not that anyone uses it anymore, but you've been forewarned)

Post Comment