HI!
not 100% sure this is a CSS bug.

I have the theme set to use fluid grid layout with 85% width.
To make more room for the editors, I have disabled all sidebar blocks on node/add and node/edit.
What happens is that since we have a div nesting like this:

...
<div class="main row grid16-16" id="main">         <-- width:85%
   <div class="main-inner inner" id="main-inner">
      <div class="sidebar-first row nested grid16-4" id="sidebar-first">         <-- width:75% * 85%
(...)
      <div class="main-group row nested grid16-12" id="main-group">         <-- width:25% * 85%
(...)

when removing the sidebar blocks, we get:

...
<div class="main row grid16-16" id="main">         <-- width:85%
   <div class="main-inner inner" id="main-inner">
(...)
   <div class="main-group row nested grid16-16" id="main-group">         <-- width:85% * 85%
(...)

resulting in a actual width of 72.25% of the viewport.

However, this can be easily fixed overriding CSS.
Again, not sure if this is a problem of my setup, but if it's a general bug it would be great to fix it, if possible.
Thank you

Comments

bohz’s picture

bohz commented

I mistakenly switched widths in the first code block above, it should be:

...
<div class="main row grid16-16" id="main">         <-- width:85%
   <div class="main-inner inner" id="main-inner">
      <div class="sidebar-first row nested grid16-4" id="sidebar-first">         <-- width:25% * 85%
(...)
      <div class="main-group row nested grid16-12" id="main-group">         <-- width:75% * 85%
(...)
jeremycaldwell’s picture

jeremycaldwell commented
Project: Acquia Prosper » Fusion
Assigned: Unassigned » sociotech

Moving this over to the Fusion issue queue as all of the widths and sizing are handled by Fusion and not sub themes like Acquia Prosper. Thanks for the information about this too, will look into it.

sociotech’s picture

sociotech commented

bohz,

Good catch! That is indeed a css error. Fortunately it should be a pretty easy fix. Add the following lines to the bottom of your grid16-fluid.css file in Fusion Core (right after the "fluid grid width theme settings" section):

/* reset full-width nested main-group to 100% */
#main-group.grid16-16 {width: 100%;}

Let me know if that fixes the issue for you. It should be a cross-browser fix down to IE6 as well.

Once the fix is confirmed, this will go into the next beta of Fusion Core.

Thanks.

sociotech’s picture

sociotech commented

Hmm, upon further reflection, there are other instances of elements having widths of grid16-16 that need this fix for a fluid grid.

For instance, if you have a region with multiple blocks and you set them all to grid16-16 (100%) in order to make them drop under each other and stack vertically, you'd have the same reduced width problem.

So, here's a more universal fix that should take care of any 100% width element contained within a top-level row that has been set to less than 100% (e.g., 95%, 90%, 85%):

/* now reset all nested full-width elements back to 100% */
#page .grid16-16 .grid16-16 {width: 100%;}

Give it a shot and let me know if it works for you.

Thanks.

bohz’s picture

bohz commented

Thanks a lot sociotech!
I did try the first fix and it worked for me.
Sorry for replying a little late.
I will test the second snippet tomorrow.
cheers

sociotech’s picture

sociotech commented
Status: Active » Fixed

Fixed in beta 3 release.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.