panels layouts break column alignment

You can't have ANY blocks in the content region when using the panels layouts with Omega. This is currently the only way this works. We are going to make the panels integration much tighter and better, but for now you would just have to use the panels layout without ANY blocks at all to make it work properly.

yes it does but that adds unnecessary nesting. The idea behind it is to not have region wrappers around the panels layouts and thus make the alpha/omega css class unnecessary. Simply disabling all blocks in the content region would solve it.

Simply removing blocks doesn't actually solve the issue completely.

I have no blocks in my content region. I'm using a mini-panel for the header and footer of my site. These mini-panels are embedded in two regions inside two zones, as "blocks" using context module because thats the only way that I know how to do it. This is a totally different use case than originally reported here, but exhibiting the same exact errors with broken margins, originally reported on #1253046: Some panels layouts are missing alpha/omega classes).

My proposal there was to use the alpha/omega classes, and to get rid completely of the grid-12 / grid-16 classes for full-width panel-panes. Which i believe this thread seems to discount as a viable solution.

So what about a combination of some of the comments above (about adding the correct container-12 / container-16) to the panel wrapper div, and then adding special case CSS to target these containers inside containers?

If someone knows of another solution (besides abandoning panels altogether and reverting to the omega layout interface), please advise.

Lets re-open this.

For me it did worked removing all blocks from the content region. But I think it would be useful to be able to place panels inside a region along with other blocks.

Subscribe.

Also, because we remove all blocks in the content region, I find it a little tiring to have to add to every panel page I create:

- tabs
- system help (not always)
- breadcrumbs

which used to show up in the content region. Is there another way to do it?

Joaquin,

Two things:

1) Have you enabled and implemented/overridden the default panels provided by CTools Pane Manager, to control node view, and other standard Drupal page views?

2) You might be able to setup a base panel with all the elements you need, and clone that, so you dont have to start from scratch every time.

With panels, its usually best to go all in, and use them for everything. Maybe ask Merlin if there is any other suggested usage patterns to follow...

This may or may not be the best place to post this, as it may be a separate issue, but I'm experiencing the same problem with the 12-grid panels layout. I'm using 3-9, but the effect is this: everything I put in the right-column is line-breaking down below everything in the left-hand column. This does not happen when I use a standard panels layout... but then I don't get the awesome media query goodness when I don't use the Omega layout.

It was also mentioned here:
http://drupal.org/node/983758#comment-4936978
but @digitaldonkey never posted another issue.

I did change alpha-default-wide-12.css on line 13 to:

-  margin-right: 10px;
+  margin-right: 0 !important;

Which did fix my issue, but I don't know enough about how the 960 grid works to know if this fubared something else up. Let me know if I'm on the right track.

Regarding #11, yes, panels everywhere, is an obvious alternative... as is panels_960gs, which simply needs to add media query support, and it would work great. However, that is slightly off topic, since Omega is now interested in integrating Panels support. I'm sure this will happen, but it will need to simply be a case of special-case CSS to handle the panels-inside-blocks use case.

I have a similar problem to the poster in #12. I'm using the omega-12-threecol-4-4-4 layout, and with three blocks in each of the 4-4-4 regions, the content in the far right is being knocked onto the next line. If I add an alpha class to the far left, and omega to the far right, then it works properly.

attached patch makes the change I described in #14, which makes the panels layout work for me.

Actually, these classes need to be added to the top and bottom panel regions too, otherwise they all have extra padding on the left and right too.

I think you mean your patch should be tested?

Well, yes and no. It does need testing, but it also needs work. These alpha and omega classes need applying throughout the panels integration code base. I've only done it for one of the layouts.

Attached patch makes all of the alterations that I found to be required in order to get the various 12 column panels working nicely. This involved adding alpha and omega classes to the panel-panel divs, as well as a clearfix class to the panel-display divs. The clearfix was especially required for the stacked layouts, though I added them throughout for consistency.

If you can confirm that this works for you too, I'll extend the patch to cover the 16 and 24 panel based grid layouts.

EDIT: OK, so I should have read the entire thread more thoroughly first. This fixes the problem in some cases (for example a panel node, where you essentially have nested grid containers) but not in all cases.

For example, when you view on a mobile device, omega-mobile.css doesn't even have styling for alpha and omega classes, so they don't work here and you still get extra padding on the left and right. I tried adding the alpha and omega styles to the omega-mobile.css file, but then when you take a three column layout - which would have alpha on the far left column and omega on the far right column - because the columns are now stacked all of them should really have alpha AND omega classes as opposed to just one, the other, or none, otherwise you only loose the margin off one side.

I found (what i believe to be) a better solution that doesn't require the addition of alpha and omega classes (which causes issues as mentioned above with the responsive layouts).

This solution adds a custom identifier class to the panel-pane wrapper div called "omega-grid", and, then combined with some cleverly targeted css in alpha-mobile.css, it nulls out the left and right margins, when there is an omega grid inside of a block, thats inside of a container.

I think this is going to be the best strategy to work for all cases, whether you're using a mini-panel inside a block, placed in an omega region, or using the Panel-Page as the Content area of a region.

Regarding Comment #9, @jackbravo:

with my patch in #20, you can add a mini-panel (I called it site_preface) and added a single Zone, and a single Region, also both called "Preface". Then add those three page components you mention in #9 to that mini-panel. Finally, use context module, to add a "site-wide" context, and add the site_preface mini-panel to the "Preface" region. Done.

I'm doing this exact thing on a new project. I have 4 regions: Header, Preface, Content, Footer. Then there are 4 zones, with exactly the same name: Header, Preface, Content, Footer... all are setup to be 16 grid columns wide.

Then I use Mini-panels, placed with context for the Header, Preface, and Footer regions. And then use the Page Manager to override the node_view for the Content section.

I ran into this too X-)

Re-roll against dev branch.

The patch works fine, I only question whether they fubhy/himerus want to solve the problem with negative margins though. Still, +1.

Patch in #23 seemed to work fine in all browsers except for Chrome on Windows. Strange.

Hrm, that is strange, Chrome not being able to handle a negative margin.

Thanks for the bug report mrfelton, I'll definitely need to investigate this, as we have a handfull of sites going live with this fix soon.

Perfect. #23 worked for me!

@mansspams - chrome on windows? I tested in loads of browsers. Chrome was fine on the mac, but borked on Windows. Stange, I know. It was a 12 col 3 col stacked layout. I'll retest.

1) Please commit this. Tested on several browsers (also chrome on windows). Works great.

2) Found small "problem"

+++ b/alpha/css/alpha-mobile.cssundefined
@@ -8,4 +8,13 @@
\ No newline at end of file

Needs newline

==> I fixed that, thats the only thing I changed.

3) This rtbc+++++

4) This theme is awesome I made a basic responsive extranet site with views, panels and omega with only 73 lines of css (blanks and comments counted)

Why make this Panels-specific? I had the same problem with Display Suite, but the same could occur if you hand-enter grid classes in content to make columns, or by other means.

I couldn't use the Omega/960 grid definitions to make columns within a region since the region is already a grid-x - that is, 20px narrower than its container and with 10px l/r margins. I also don't want to have to add alpha/omega classes to the individual first/last columns - I'd like them to be a generic definition which can have an arbitrary number of instances and be re-ordered easily.

Here's how I handled it:

I created a grid-overrides.css file in my sub-theme.

Then I put in overrides like this:

.container-12 .grid-1.no-gutter {
margin: 0;
width: 80px;
}

Then I can add "no-gutter" to the "Additional region classes" in the Omega settings for a region. Then that particular region will be full width, without the 10px gutter on each side. What that means is I can put Omega grid-based columns INSIDE that region (by defining a wrapper around any field with regular "grid-x" class, which is easy with Display Suite) and have them fit, as if the region were just a container, not a grid column itself.

I also added this definition:

.add-gutter {
margin: 0 10px;
}

...which I do need to remember to add to any full-width fields within a no-gutter region, but that's not too hard.

I've been following this discussion because I'm about to start a new project where I want to use Omega with Panels. The relationships and context features of panels (well... page manager I guess) is too valuable to give up.

Not all my pages will be Panels pages so ...

Is there is consistent way to say if a page is a panels page, then don't show the content block? With either the normal block configuration or the context module, about the only way OI can see to do it is a hardcoded list of paths.

I am also starting a new project and would love to see Omega and panels everywhere being integrated. Omega responsive totally rules! And so does panels everywhere, what an awesome combo if the two worked well together.

I understand Omega is more focussed on delta and context but they are just *not quite* enough for me to get the look I want. I would have to install extra modules like 'design suite'.

Omega responsive theme, views, panels, page manager + panels everywhere, I doubt you would need much else! Well maybe a few others. All the other themes that work with panels everywhere don't excite me as much as Omega does. It's the future and should be integrated into every theme from now on. Omega is a pure joy to use from a designers point of view as I'm not much of a coder so +1 for Omega + PE.

Hi everybody,
i got the same problem, but my solution was quite simple:

// CSS
.panel-display {
    margin-left: -10px;
    margin-right: -10px;
}

further details:
My panel page disabled the drupal blocks and provided a Two Column 3-9 layout in its configuration, but the columns breaked like described in the previous posts. I found a little nifty details, while i inspected my generated html source code. The zone-content div declared a container-12 class like expected, the following region-content decladed a grid-12 class and the panel was placed within this container.

Simplified example:

<div class="zone-content container-12">
  <div class="grid-12 region-content"> // declaring a 10px margin left and right
    ...
    <div class="panel-display omega-12-twocol-3-9">
      <div class="panel-panel grid-3">...</div> // declaring a 10px margin left and right again
      <div class="panel-panel grid-9">...</div> // declaring a 10px margin left and right again
    </div>
  </div>
</div>

The problem was the region-content div which declared the grid-12 which shouldn't be used when a panel takes the control of the page layout.

I'm looking forward to here if this solution also helped you!

This is a very similar fix to what I had to do to get the panels layouts to work when I was writing them. I think this is a good idea to commit, as most people using panels will need it.

I think @mrfelton had it right with #19. According to the 960grid spec, the alpha and omega classes are used to remove the left and right margins for nested grid-n divs. Which is what we have here. Omega is outputting the region with .grid-n class. This gives us the default 10px margin that we want for the 960 grid system. Then when using he omega panels tpl files we are getting another .grid-n class giving us another 10px margin because we are nesting the grids. The correct way of handling this is to add the .alpha and .omega classes to the nested .grid-n classes to remove the extra margins for the first and last child elements respectively.

Here some citations:

The final bit of knowledge you’ll need to know is that you are provided with the alpha ("first") and omega ("last") classes that must be applied to any grid units that are the children of other grids.

Obviously, the alpha class will be applied to the first child and the omega class to the last child.

Essentially, these classes provide a margin fix so that you can nest grid units inside of other grid units.

http://sixrevisions.com/web_design/the-960-grid-system-made-easy/

.alpha {
  margin-left: 0;
}
.omega {
  margin-right: 0;
}

So adding a class .panel-display isn't the correct solution. That only stretches out the Panels. We need to add the correct .alpha and .omega classes to the omega-panels tlp files because of the nested grid-n problem.

Or, remove the

Comment #34 is, functionally speaking, nearly exactly the the same as my patch in #20 (as well as the whitespace fix in #30). The only difference is, my patch is not so opinionated as to kill the padding on all div.panel-displays. What if you're using a panel layout that is not from Omega on some pages in your site? My patch targets Omega-specific (ie 960 grid) layouts only that are nested inside existing grid elements only.

@travelertt (Comment #36): fubhy already expressed their opinion about not depending on alpha and omega classes for this in #1253046: Some panels layouts are missing alpha/omega classes. The problem with alpha and omega classes is they take the left and right whitespace off regardless or not if the panel is nested inside another grid container or not.

Setting back to RTBC.

Commited. Thanks

Note to all: IE7 has issues with the negative margins added by this patch. If you're using panels inside grids with omega, be sure to check out #1450520: Improve Panel layout support in <= IE7.