Themes 2.0 overflow problems

Hello, this document is to look at the overflow:hidden - fixed width problem that is plaguing several areas of Moodle 2.0.

The problem

The problem at hand is that content that is to wide to the main content area is not displayed, the browser doesn't scroll horizontally, the oversized content is just obscured behind the side blocks or off screen.

You can check this out for yourself very easily by simply shrinking down your browser (1024ish will do it) and visiting any of the following moodle.org pages:

• http://moodle.org/mod/forum/discuss.php?d=32796

Whilst this problem occurs with any oversized content that cannot be wrapped the following are commonly occurring instances where the problem is visible:

1. Large images or other media of one form or another.
2. Tables, any table that has numerous columns and/or large content in columns.
   • Tabulated data
   • Tables for internal layout (like the forum)
3. Unwrapable content
   • This is normally always user entered content.
   • Different browsers handle things differently.

The technical description

Although there are several ways in which this problem will rear its head there is in fact only one cause to this problem which is the a combination of the fixed width that gets set on the core layout XHTML, and the overflow:hidden setting that is required by the layout.

The layout that we in the base theme within Moodle is largely based on Matthew James Taylor's Hold grail layout which by all means is an excellent layout, however (and it does state this in the description of the layout) you need to be careful about the width of your content because of this exact problem.

This problem starts on the very first div that contains content within the body *<div id="page-content">....</div>* which has the following style:

1. page-content {clear:both;float:left;overflow:hidden;position:relative;width:100%;min-width:900px;}

Setting the width to 100% instantly boxes the displayable area to just the browsers internal display width, and then overflow:hidden ensures that any overflow is not visible.

This is required because the premise of this layout is to move everything out of the viewport and the move things back into the correct position and in doing this it goes as far as expanding content divs out to 200% width.

Because of this if we remove the width 100% and/or overflow hidden everything breaks because the page will ALWAYS expand beyond the browsers displayable area even if the content is easily displayed.

As far as I can see presently there is no way to avoid this problem while using this layout.

Why use this layout, because it is cross browser, because it is search engine optimised (column ordering 2,1,3) and because in EVERY other respect it works well.

The purposed solution

A couple of days ago I sat down with Martin and explained this to him and we looked into it and came up with the following three part solution:

1. Wrap format_text output within a div with a class that allows us to manage overflow - This helps us ensure that user content wraps correctly, we wrap all format_text calls in a div with a class that we then style with overflow:auto.
2. Convert places that use tables for layout to divs - areas such as forum posts need to be converted from tables to divs so that they wrap cleanly, this is required because oversized content in tables causes the table cells to grow destroying layout and causing wrapping issues.
3. Locate places where tables are likely to require horizontal scrolling and wrap them in divs - the div will have a class like `flexible-wrap` that sets an overflow:auto so that the table is scrollable if required.

The negatives of this solution:

• Because all format_text calls will be wrapped by this special div there will likely be regressions throughout Moodle that will need special styling to fix.
• IE6/7 and possibly 8/9 renderer scrollbars inside an element rather than outside like most other browsers meaning that there is a *VERY* high chance there will be redundant scrollbars within elements that don't require wrapping.
• Elements that require scrolling will have their own scrollbars and particularly in the case of tables this is likely to require scrolling the page vertically to locate the horizontal scrollbar, scrolling horizontally and then locating the desired row vertically again.
• Elements with a set width (e.g.style="width:2000px") greater than the content area will need to be wrapped in a div with the wrapping class as well.