FLUID-4023: Reconsider overflow:auto for containers

Description

This is causing problems for containers, specifically in IE.

Research more...

Uportal:
-removed and replaced with script from 'box model' on positioniseverything.net
-used jquery helper styles "ui-helper-clearfix"
-applied to all containers w/ overflow

TODOs and Requirements

1. Research possible solutions
⁃ work cross browser (a-grade at least)
⁃ force floats to clear, to be contained within their parent
⁃ content should remain within the borders of its parent
⁃ clearing should not force the parent to clear all the way down to the bottom of neighbouring float columns
⁃ the fix should not cause unexpected scroll bars or hidden content
2. Implement test page that allows you to compare the various solutions
3. Update fl-fix and/or add an additional clearfix solution to the fss

Comments

• Justin Obara commented 2011-03-04T14:09:54.531-0500

  See http://old.nabble.com/Updates-to-FSS-to30963054.html for a suggested alternative to fl-fix

• Justin Obara commented 2011-03-07T10:22:22.769-0500

  from FSS:

  .fl-fix {overflow: auto; zoom:1;}

  jQuery UI's clearfix:

  https://github.com/jquery/jquery-ui/blob/master/themes/base/jquery.ui.core.css

• Justin Obara commented 2011-03-08T10:12:21.506-0500

  Here's a nice summary of the various clearing fixes http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/

• Justin Obara commented 2011-03-08T11:23:47.121-0500

  Added an fl-fix manual test to my github repo: https://github.com/jobara/infusion/tree/FLUID-4023/src/webapp/tests/manual-tests
  This can be used to help us determine the best approach to take.

• Justin Obara commented 2011-03-14T14:22:28.080-0400

  some info on inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

• heidi valles commented 2011-03-30T11:17:01.956-0400

  Our recommended solution (new clearfix) has been added to fss-layout.css as fl-clearfix. Available at https://github.com/jobara/infusion/tree/FLUID-4023

• heidi valles commented 2011-03-30T11:24:55.261-0400

  hi Gary! Could you try out our new fss-layout.css file on Justin's github for this issue? It has a new style called fl-clearfix that hopefully fixes your issues. Let us know how it works.

• heidi valles commented 2011-04-13T10:35:26.994-0400

  Checkout this clearfix from http://html5boilerplate.com 's style.css and see how it compares to our new one.

  /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
  j.mp/bestclearfix */
  .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
  .clearfix:after { clear: both; }
  /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
  .clearfix { zoom: 1; }

• Harris Wong commented 2011-05-16T15:59:39.612-0400

  Bug Parade Infusion

• Justin Obara commented 2011-05-18T12:37:24.204-0400

  sent pull request https://github.com/fluid-project/infusion/pull/48

• Justin Obara commented 2011-06-01T14:48:46.690-0400

  Since I haven't been able to get a reply about an open source license for the "New Clearfix", I switched to the "Micro Clearfix" which has an MIT license and less css.

• Michelle D'Souza commented 2011-06-02T14:03:12.595-0400

  Merged into project repo at f430de85a8465aa09eeaa54bbe71f44ce06fe9b4