Opened 12 years ago

Closed 8 years ago

#3887 closed task (wontfix)

Do layout in CSS not JS

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

Description (last modified by Adam Peller)

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

Attachments (2)

split.html (712 bytes) - added by bill 12 years ago.
example of doing split container in CSS (except for dragging the dividers!)
TabBorder.patch (8.0 KB) - added by Adam Peller 11 years ago.
I think I've got it working.

Download all attachments as: .zip

Change History (14)

Changed 12 years ago by bill

Attachment: split.html added

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

comment:1 Changed 12 years ago by bill

Description: modified (diff)
Type: defecttask

comment:2 Changed 12 years ago by bill

Description: modified (diff)

comment:3 Changed 11 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 11 years ago by bill

Milestone: 2.01.1

comment:5 Changed 11 years ago by bill

Milestone: 1.12.0

comment:6 Changed 11 years ago by bill

Description: modified (diff)

comment:7 Changed 11 years ago by Adam Peller

Keywords: bordercontainer added

comment:8 Changed 11 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:9 Changed 11 years ago by Adam Peller

Description: modified (diff)
Milestone: 1.31.2

Feels like it's close enough that we should give this a shot for 1.2.

Changed 11 years ago by Adam Peller

Attachment: TabBorder.patch added

I think I've got it working.

comment:10 Changed 11 years ago by Adam Peller

Milestone: 1.2future

comment:11 Changed 8 years ago by Adam Peller

Owner: Adam Peller deleted

assigning all Dijit bugs to Bill

comment:12 Changed 8 years ago by bill

Resolution: wontfix
Status: newclosed
Note: See TracTickets for help on using tickets.