Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Themes 2.0 overflow problems

From MoodleDocs
Revision as of 04:12, 26 October 2010 by Martin Dougiamas (talk | contribs)

This document examines the overflow:hidden - fixed width problem currently plaguing several areas of Moodle 2.0 (as of October 26, 2010)

The problem

Content that is too wide for the main content area is not displayed correctly is obscured behind the side blocks or off-screen, and the browser doesn't scroll horizontally.

To see it, shrink your browser window and look at:

It is caused by oversized, unwrappable content:

  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. Unwrappable content
    • This is normally always user-entered text or images.
    • Different browsers handle things differently.

The technical description

The cause is 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 used in the base theme within Moodle is based on Matthew James Taylor's Hold grail layout which 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.