Embedding panels within panels causes CSS ordering conflicts [#169456]

Originally posted as part of a comment by merlinofchaos #160392: http://drupal.org/node/160392#comment-289852.

Embedding panels within panels caused CSS ordering conflicts. I had to reorganize panels_render_layout a bit to compensate. This isn't really a bug with panels_mini exactly, but a difficulty of the system. I suspect we'll see more of these, too; already we've got cpelham's issue with flexible layout above, which may or may not be the same problem. (I suspect multiple flexible layouts on the same page may currently conflict with each other, but I'll have to doublecheck that).

merlinofchaos said this specific problem was solved, but that similar problems will probably arise. I've created this issue as a stub for a "universal solution" for this, if such a solution would be possible and feasible in this case (I personally don't know the details). If this stub is useless, just mark it as closed.

Comments

Comment #1

merlinofchaos commented 31 December 2007 at 02:10

There definitely continue to be issues when putting panels within panels especially if both of the panels are 'flexible'. There are also issues with panel styles. Most of the issues seem to be resolved if all panels involved have a proper css id.

Comment #2

catch

he/him

English

commented 7 January 2008 at 00:39

A proper id ought to cover most situations. Is there any known that it doesn't? If so then that's documentation rather than code imo.

Will try to reproduce at some point to get a better idea of the issue.

Comment #3

frankcarey commented 11 May 2009 at 20:57

We just ran into this issue. If the mini-panel and main panel are both set to flexible, they share "col" and "row" classes in the css. Here is the css that gets output in head.

<style type="text/css" media="all">
#mini-panel-user_info div.panel-row-1 div.panel-col-1 { width: 99%; }
#mini-panel-user_info div.panel-row-2 div.panel-col-1 { width: 29.5%; }
#mini-panel-user_info div.panel-row-2 div.panel-col-2 { width: 69.5%; }
</style>

<style type="text/css" media="all">
#user-profile div.panel-row-1 div.panel-col-1 { width: 99%; }
</style>

The problem is that #user-profile css (main panel) css is declared after #mini-panel-user_info (mini-panel). If there is a way to have main elements declared first, followed by subelements, then it should be ok. We redeclared the mini panel stuff in page.tpl.php at the very end and it worked correctly.

<style type="text/css" media="all">
#mini-panel-user_info div.panel-row-1 div.panel-col-1 { width: 99%; }
#mini-panel-user_info div.panel-row-2 div.panel-col-1 { width: 29.5%; }
#mini-panel-user_info div.panel-row-2 div.panel-col-2 { width: 69.5%; }
</style>

<style type="text/css" media="all">
#user-profile div.panel-row-1 div.panel-col-1 { width: 99%; }
</style>

<style type="text/css" media="all">
#mini-panel-user_info div.panel-row-1 div.panel-col-1 { width: 99%; }
#mini-panel-user_info div.panel-row-2 div.panel-col-1 { width: 29.5%; }
#mini-panel-user_info div.panel-row-2 div.panel-col-2 { width: 69.5%; }
</style>

To actually fix this, we just changed the flexible output to a 2-col layout, and dealt with sizing in out own css. Hope this helps other figure it out. Cheers