[dojox/app] Scrollable dojox/app/widgets/Container blocks whole screen

[Paul Christopher]

Description

See attached modified start page of dojox/app/tests/multiSceneApp: A dojox/app/widgets/Container set to "scrollable:true" blocks the whole screen, i.e. you cannot click on the tab bar anymore, since it is invisibly covered by the scrollable container.

Steps to reproduce the issue

• Replace the attached files in dojox/app/tests/multiSceneApp and run the app.

• Notice: The scene as a whole is scrollable, however you cannot click on the tab bar anymore

Discussion

All in all, the purpose of dojox/app/widgets/Container is not clear to me. I have noticed that you need to wrap dojox/mobile/SwapView inside this container to make them work with multiSceneApp, but you cannot use dojox/app/widgets/Container to make a scene scrollable.

dojox/mobile/ScrollableView cannot be used either. It has the same effect as dojox/app/widgets/Container: The whole screen is blocked.

You can only use dojox/mobile/ScrollablePane at the moment to make a view scrollable.

[Ed Chatelain]

There are many things which can cause problems with scrolling.

Have you looked at these tests? They have some explanation of what works and what does not. ​http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/scrollableTestApp/ ​http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/scrollableTestApp2/

Also the ​http://archive.dojotoolkit.org/nightly/checkout/dojox/app/tests/longListTestApp/ Does something very similar to what you are trying to do with the #Footer1,Header1,LongList1 view. I believe your test will work if you set style="z-index: 1;" on the dojox/mobile/TabBar in application.html

dojox/app/widgets/Container is an extension of a dijit/_container which has code to set and use the "data-app-constraint", and to set the size and position the container. It also has code to handle it when scrollable: true is set on the container.

These are the notes from the scrollableTestApp's testInfo.html

Note that the tests which use dojox/app/widgets/Container with scrollable:true should use use headers or footers with data-app-constraint="top" or data-app-constraint="bottom" and they should not use headers and footers with fixed:'top' and fixed:'bottom'. Note that the tests which use dojox/mobile/ScrollableView should use headers and footers with fixed:'top' and fixed:'bottom' and they should not use headers or footers with data-app-constraint="top" or data-app-constraint="bottom".

[Paul Christopher]

Thanks your the detailed explanation, Ed. Indeed: Changing the tabindex of the tabbar fixes the mentioned issue.