Hi Folks,

Setting fixed width columns in the flexible layout scheme does not yield the desired column width, for instance if I set a column to be 185px, the content area will cover 183px. This is really a annoying if you want to design your site at a pixel-level and this also makes me wonder why I would have the option to have a fixed with.

The problem is that most panels in the generated CSS will have a rule setting those panels to 49.5% or 99%. In Panels 2 I had the same issues, but I was able to fix it by setting all those entries to 100% in flexible.css. Now that the CSS is created on the fly, I can't do this anymore.

I am sure merlinofchaos has a good reason to do so, but I don't see them really. IMHO Designers will be restrained in their designs, for not being able to set all columns, content etc to their desired pixel width.

So, does anyone else face this problem, or better yet does anyone have a solution for it?

CommentFileSizeAuthor
#4 Bild 1.png89.23 KBtheusualsuspect

Comments

merlinofchaos’s picture

merlinofchaos commented

Yes, fluid areas are adjusted down to 99%, because IE6 users will have columns falling down if you actually use 100%.

Fixed areas should not be adjusted at all, however, they should be given the CSS to be the width you specified.

Still, if you have problems with the flexible layout builder and need pixel-exactness, you absolutely should be designing layouts rather than using the flexible builder. I cannot fathom why anyone who would *need* that kind of precision should expect that a flexible builder like this, especially one that's very new and in alpha software will even work for them.

theusualsuspect’s picture

theusualsuspect commented

I don't expect the flexible builder to be perfect, I just wanted to understand how it works exactly. It is obvious how much work you put in all this and I can understand if you being annoyed by all this question of newbies, but well what else is there than the issue queue. It was just a support request and no bug report.

I do not consider myself to be a designer nor a developer so far and I do not "need" that kind of precision, but I like to be precise if I can. Considering that you also programmed the marvellous Views module, I did not hesitate to install Panels.

Thanks for the explantion though. Cross-browser compatibilty is still an issue I have to tackle.

merlinofchaos’s picture

merlinofchaos commented

Crossbrowser stuff makes me *crazy*.

If 185 is really getting converted to 183 in the .css file, that would be a bug. If it's 183 for some other reason (padding somewhere?) that may be something else.

theusualsuspect’s picture

theusualsuspect commented
StatusFileSize
new Bild 1.png89.23 KB

IE makes us crazy...

Anyways, I attached a firebug screenshot. The marked div makes the 185px set in the flexible layout builder to 183px, due to the following rule:

.panels-flexible-region-5-pr {f2db14d1...89e.css?R (Linie 129)
float:left;
width:99%;
}

The div before the marked one is set to 185px according to firebug.

merlinofchaos’s picture

merlinofchaos commented

Oh well that *is* annoying. Hm. Not sure how to deal with that. =(

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Closed (won't fix)

I have tried to come up with a way to do this, but I can't. I am afraid that your ownly solution is going to be to add a little extra CSS to override that 99%. I tried to selectively do that but I ran into situations where you'd have 99% wide rows on top of 100% wide rows and it looks really bad.

I'm sorry I can't do better. =(

theusualsuspect’s picture

theusualsuspect commented

Thanks a million for your efforts on this. I am sorry for this late appreciation, but I was so busy on some other work-related not-drupal-related projects, that I had no time to look at drupal.org. Anyways thanks..

chrisck’s picture

chrisck
he/him
Location BC, Canada
commented 
This may be a bit late, but others might find it useful.

I set columns to fluid and leave them as they are in the panels. I then add the code below.

This CSS code resets the flexible panels to act like normal, like the other panels:

.panel-flexible,
.panels-flexible-row,
.panels-flexible-region{
width: 100%;
padding: 0;
}

.panels-flexible-region-inside{
padding-left: 0 !important;
padding-right: 0 !important;
}

You may ask why I put left and right instead of just padding. Padding: 0 didn't work, I could still see padding-left: 0.5em. This is optional, but I also add this to rid of automated margin spacing between panels:

.inside{
margin: 0 !important;
}


Once this is done you can then go on to put in pixel-perfect widths to your heart's desire.
*Note this may break IE6 because of 100% width's, but I don't really care for that piece of turd anymore. Those who use IE6 can suffer the consequences and be punished.

kitemedia
chrisck’s picture

chrisck
he/him
Location BC, Canada
commented

When using borders or backgrounds, skinners use the dimensions of sliced images to set the height/width of divs. A cut off border by 2-3 pixels is definitely noticeable to anyone. Usually, fixing the CSS is easier than going back to redesign the mockup. I have a solution below. Thanks for this great module.

StevenSpinoza’s picture

StevenSpinoza commented
Component: Display rendering » Code
Issue summary: View changes

chrisck's CSS code resets worked for me.

Thanks.

P.S. Anyone wants to know the browsers/IE6 market share? Link

StevenSpinoza’s picture

StevenSpinoza commented
Status: Closed (won't fix) » Closed (works as designed)

My first instinct was to add more CSS resets, but later I found myself digging in the panels module and just had to uncheck a checkbox 😅

Here the answer:
https://www.drupal.org/project/panels/issues/1799026#comment-12484371