Ticket #3887 (new task)
Do layout in CSS not JS
| Reported by: | bill | Owned by: | peller |
|---|---|---|---|
| Priority: | normal | Milestone: | future |
| Component: | Dijit | Version: | 0.9 |
| Severity: | normal | Keywords: | bordercontainer |
| Cc: |
Description (last modified by peller) (diff)
As per
http://www.alistapart.com/articles/conflictingabsolutepositions
try to do pane layout in CSS rather than JS. There are three goals to this:
1. make resizing smoother. It's especially bad on FF but IE also shows a little lag on resizing something big like themeTester.html
2. ideally it would also solve the problem of having layout containers inside hiddens divs (IE, a hidden content pane), which currently isn't supported because when the layout container initializes it fails trying to do calls like getMarginBox(), which returns 0 since it can't figure out the real answer. But not sure if that's feasible to avoid, since we still need to do some JS calculations, like to get the height of the tab labels in a TabContainer? (which depends on the font size and whether or not the labels overflow from one row to two rows).
3. avoid race conditions on initialization. The layout widgets in 0.4 had lots of setTimeout() calls because initial size calculations would fail or give incorrect answers, and in 1.0 we go to pains to never call setMarginBox() immediately followed by getContentBox(), which fails since the margin box size doesn't actually readjust until the whole block of JS code finishes executing.
Even SplitContainer/AccordionContainer? may be convertible. See attached split.html for an example (it basically divides the screen into three equal section, each of which has a 10px divider and the remaining space is for content).
