Try our conversational search powered by Generative AI!

Using 960 grid columns in Composer - layout brakes


I'm using a 960 grid framework for controlling column layout. Each column has a set width and margin in my layout.css. But when in editmode in Composer, each block gets extra borders, causing the layout to break. Borders are added to the width of the block-element.

A one-third column has a width og 300px in my CSS. In Composer it will get a width of 300px + 2px border (1px on left, right). The third column is therefore being pushed below column 1 and 2. There is no room for for the extra borders. This is not excactly ideal for the editors of this solution. It really should "look" correct in editmode as well.

I was thinking of maybe setting margin: 0 -1px; on the block elements, overriding the default composer stylesheet. But will this be safe/ futureproof? What if classnames are changed in future versions of Composer?

Anyone had the same problem?




May 05, 2011 10:53

We have had issues with layouts breaking in composer mode as well, and solved them by simply overriding the composer stylesheet.

This is not a futureproof solution, but I personally don't see it as a big issue. It's not like you are going to upgrade Composer every other day, and in case you do, the stylesheet is probably the simplest thing you're going to have to worry about. 

That being said, when going from Composer 3.2.5 to 4 the css classnames did not change, so you probably don't have a lot to worry about.

Jun 17, 2011 10:36

This is fixed in Composer 4 R2.

"It is now for example possible to turn off the borders around the Composer blocks to work with the page exactly as it looks for the end visitor."

So, upgrade if possible. If not, override the stylesheet (and/or js-files).

Jun 17, 2011 11:15
This thread is locked and should be used for reference only. Please use the Legacy add-ons forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.