Question

I am struggling to use dojox.mobile.ScrollableView for scrolling horizontally: I have a

<div data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">

which contains several div elements which float left. However, in this case the elements are not displayed in one single row:

http://jsfiddle.net/wf6NZ/

I could place another div in the ScrollableView with a width set to the sum of all widths plus margins:

http://jsfiddle.net/N7MrD/

However, this requires calculation of the resulting width of all elements which I want to avoid.

So the question is: Is it possible to achieve the results of the second link without the helper div?

Answer 1

Try to define the style ‘white-space: nowrap’ in any container div.

For example,

<div id="view" style="white-space:nowrap" data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">