The problems at using UIO fat panel

Tue Mar 13 19:44:31 UTC 2012

Hi,

After observing a few pages from OER Commons Green site (http://www.oercommons.org/green) that have the UIO fat panel integrated in, I came up with a list of the cases that UIO has problem dealing with and would mess up the page as a result. Some cases could be resolved with the help of the page css styling change. These cases have a solution stated along. Of course, there are also cases that I don't have a solution yet.

Feel free to comment with your thoughts or suggestions.

--- display fat panel ---
1. a div with a small css "top" value and absolute position that occupies the area that the fat panel shows up, in which case the fat panel is rendered but not accessible.

Example: The styling of the toolbar section at the top of this page,
http://www.oercommons.org/courses/addressing-social-inequality-in-chiapas-through-local-healthy-and-clean-foods-an-agroecological-view/view
blocks the fat panel from showing up.

--- increase "font size" & "line height" ---
1. <body> tag cannot have pre-defined "font-size" value, otherwise, the initial loading of the page looks having a different-size of the fonts.
Reason: "1em" is always applied to the <body> at initial loading. The "font-size" at <body> is detected by UIEnhancer as the browser default font size that is used as a base factor at the px-to-em conversion. The ideal solution is to improve UIEnhancer to detect the real browser default font size.
2. The text is restricted in a fixed-height-bordered box. The text stretches out of the box with larger font size of line height.
3. The text is defined in a fixed-width-in-px div. Increasing the font size causes the sub-divs not big enough any more to hold their contents. Use em instead.

--- switch "Colors and Contrast" ---
1. The use of the background images that stay at the same color. Possible solutions:
* Removed the background images at the display of the high-contrast themes
* Switch the background images to the properly color tuned 

--- turn on "Table of Contents" ---
1. Only use <h1>...<h6> on the headers that are meant to be shown in the "table of contents".

--- cases that "Emphasize Links" doesn't work ---
1. The link is restricted in a fixed-width box and intend to show in one line but the enlarged text causes the link wraps into multiple lines.
2. A row of links are restricted in a fixed-width box, the width of the enlarged links exceeds the  pre-defined width which results in the row of the links shifts down below the box.

--- cases that "Make inputs larger" doesn't work ---
1. The button is an image
2. The button or drop-down menu etc. are button-or-dropdown-looked link or div