#13777 closed defect (wontfix)
"position:absolute" inside ScrollableView can screw up scroll calculation
Reported by: | Ming Zhe Huang | Owned by: | ykami |
---|---|---|---|
Priority: | high | Milestone: | tbd |
Component: | DojoX Mobile | Version: | 1.7.0b1 |
Keywords: | Cc: | Atsushi Ono | |
Blocked By: | Blocking: |
Description
Please see the video. Test case is also attached.
This test case derives from a much more complex scenario in which "position:absolute" is used for layout. However, if "position:absolute" is used, you cannot scroll to the bottom of the view.
Attachments (2)
Change History (6)
Changed 9 years ago by
Attachment: | testAbsoluteScrollableView.html added |
---|
comment:1 Changed 9 years ago by
Cc: | Atsushi Ono added |
---|
comment:2 Changed 9 years ago by
It is the standard HTML behaviour that the size of absolute positioned child block is ignored to compute the size of parent container. In this case the computed height of ScrollableView's containerNode is 0px, so you cannot scroll to the bottom of the list. This works as expected.
To avoid this, please try the followings:
- Reconsider whether position:relative can be used instead
- Set the height of ScrollableView's containerNode explicitly as below
dijit.byId("parentScrollableViewId").containerNode.style.height = "500px";
comment:3 Changed 9 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
Archer, it is obvious from the CSS spec that a container element does not expand if its children are all absolute. In addition to onoat's suggestions, another possible idea I think is to have a place holder relative div element with an explicit height specified. That way you don't have to care about the ScrollableView's internal containerNode.
comment:4 Changed 9 years ago by
Thanks. I totally agree that this bug is invalid.
A suggestion. This bug may remind us that we need more layout strategy or layout containers, then people are less likely to take care of details of layout by themselves, which sometimes is cumbersome or rigid.
Actually in my scenario the problem can be solved if we have a expanding box which eats remaining space not occupied by siblings, something like CSS3 flex box tries to provide.
Test Case