I just created a flexible panel layout consisting only of two rows with a single region in each row. When I went to style it, I was faced with a dizzying number of nested div tags:

<div class="panel-flexible panel-flexible-2 clear-block" >
  <div class="panel-flexible-inside panel-flexible-2-inside">
    <div class="panel-flexible-2-middle">
      <div class="panels-flexible-column panels-flexible-column-2-main panels-flexible-column-first panels-flexible-column-last">
        <div class="inside panels-flexible-column-inside panels-flexible-column-2-main-inside panels-flexible-column-inside-first panels-flexible-column-inside-last">
          <div class="panels-flexible-column-2-main-middle">
            <div class="panels-flexible-row panels-flexible-row-2-main-row panels-flexible-row-first clear-block">
              <div class="inside panels-flexible-row-inside panels-flexible-row-2-main-row-inside panels-flexible-row-inside-first clear-block">
                <div class="panels-flexible-row-2-main-row-middle">
                  <div class="panels-flexible-region panels-flexible-region-2-center panels-flexible-region-first panels-flexible-region-last">
                    <div class="inside panels-flexible-region-inside panels-flexible-region-2-center-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
                      <!--content goes here-->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panels-flexible-row panels-flexible-row-2-1 panels-flexible-row-last clear-block">
              <div class="inside panels-flexible-row-inside panels-flexible-row-2-1-inside panels-flexible-row-inside-last clear-block">
                <div class="panels-flexible-row-2-1-middle">
                  <div class="panels-flexible-region panels-flexible-region-2-bottom panels-flexible-region-first panels-flexible-region-last">
                    <div class="inside panels-flexible-region-inside panels-flexible-region-2-bottom-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
                      <!--content goes here-->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Needless to say, that's fairly excessive for a simple layout like this. I'm sure there's a reason for it in complex layouts, but is there some way we can streamline this for layouts that do not require that complexity? Ideally, there would be a way to output only the divs necessary to construct a given layout, but I'm not familiar enough with the underlying code here to offer specific suggestions (frankly, all of the Views module source code is so far over my head it'd explode if I tried to figure it out).

Comments

seanr’s picture

Meant panels not views in the last sentence above, but frankly, they're both amazingly complex to me. LOL

friolator’s picture

why not use one of the simpler fixed layouts? you can style the widths of those columns easily enough if you assign an ID to the panel.

If you need to nest things in a complex way, then set up a mini-panel for whatever is nested, then drop that into one of the columns. I've been amazed at how much I've been able to do this way and the resulting code is pretty clean.

merlinofchaos’s picture

Status: Active » Closed (won't fix)

You don't have to use flexible. If you don't like the HTML this produces, you have the option of creating your own layout.

Bugs are things that are broken. This is not broken, you just don't like it.

ridolfidesigns’s picture

I don't think it's not a matter of liking or not liking, it's a matter of best practices for HTML.

I have been trying to understand why there are divs upon divs with panels. I love panels but sometimes it makes me not want to use it because of the excessive amount of divs it produces.

merlinofchaos’s picture

Again, flexible is a convenience for people who don't want to build their own layouts.

People who are concerned with their HTML should build their own layouts. They will always be better than generated HTML.

Even *if* flexible gets cleaned up a little, it will always bother people who like HTML purity.

ridolfidesigns’s picture

Help me understand:

Why does it generate so much HTML? Why does it not just generate one or two divs per section?

sdboyer’s picture

Because the algorithm tries to produce HTML that will ALWAYS work, ALWAYS interoperate with style plugins, regardless of how many times it's nested, or how crazy the layout you've created in the designer is. Could it produce less markup? Probably. And if the flexible layout was the only option available, then maybe it would be OK for us to burn through a kabillion CPU cycles getting it as minimal as possible. But it's not, and you can (and should) create your own layouts. So flexible is and will always be a temporary and expedient solution, and the markup reflects that.

merlinofchaos’s picture

Let me add: Getting fixed and fluid floating divs to work nicely together requires some ugly coding. Especially when you have multiples. Some of the extra divs are there largely to be able to support having weird scenarios 3 fixed width regions, then 3 fluid regions, then 3 more fixed width regions all in a row. To do this properly, the only way that works is to enclose the fixed divs on the left in a div, the fluid divs in teh center in a div, and the fixed divs on the right in a div.

In order for the administrative designer to work right, those divs need to be there even when they are empty, so that they can have items added to them. Yes it's theoretically possible to detect that you'll never ever ever try to invoke the layout designer in a particular page, but there hasn't been a good reason to go to that effort. That's part of what I meant by cleaned up a little bit. I can get rid of *some* of those divs, but at the cost of doing a lot of extra calculation to see if the're necessary and if not, move the CSS from one level to another. That also adds more bits of CSS that could possibly break if things aren't exactly right, and there's already a ton of that which is a little bit fragile.

ridolfidesigns’s picture

When you say about creating, "your own layout" do you mean a tpl file or is there a way to create your own layout with panels. I really don't understand the point of panels if you are encouraging people to create their own layouts instead of using the flexible layout.

Please know I am trying to understand.

My other thought: If a user is allowed to input a width or percentage, wouldnt you be able to make the code cleaner?

merlinofchaos’s picture

See the plugins/layouts directory. Or look in themes like zen which also comes with layout plugins. There is a tutorial on creating layouts easily found on the Panels 3 documentation page in the drupal.org handbook.

alanom’s picture

Tutorials are even easier to find with links... I assume he's referring to this one.