Opened 15 years ago

Last modified 11 years ago

#3887 closed task

Do layout in CSS not JS — at Version 6

Reported by: bill Owned by: Adam Peller
Priority: high Milestone: future
Component: Dijit Version: 0.9
Keywords: bordercontainer Cc:
Blocked By: Blocking:

Description (last modified by bill)

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
  1. 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).
  1. 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).

Change History (7)

Changed 15 years ago by bill

Attachment: split.html added

example of doing split container in CSS (except for dragging the dividers!)

comment:1 Changed 15 years ago by bill

Description: modified (diff)
Type: defecttask

comment:2 Changed 15 years ago by bill

Description: modified (diff)

comment:3 Changed 15 years ago by bill

Owner: changed from bill to Adam Peller

Adam is working on this for BorderLayout? container; that work should be extended to TabContainer? also (after all it's just a top+center layout), and AccordionContainer?. SplitContainer? and LayoutContainer? are obsoleted by BorderLayout?. So I think we can use this technique for all the layout widgets (but time will tell).

comment:4 Changed 15 years ago by bill

Milestone: 2.01.1

comment:5 Changed 14 years ago by bill

Milestone: 1.12.0

comment:6 Changed 14 years ago by bill

Description: modified (diff)
Note: See TracTickets for help on using tickets.