CODEWITHSUNDEEP
htmlcssdojodojox.mobile
fabriziocucci
fabriziocucci

Reputation: 782

text-align: center not working with horizontal dojox/mobile/ScrollablePane

I'm building a simple mobile app with dojo.mobile (1.10) and I'm stuck with the following problem (probably due to my lack of CSS knowledge, my bad sorry).

For the sake of my question, suppose I wanted to create a horizontally ScrollablePane that will contain some buttons dynamically added to and perfectly centered within the container.

The first thing that came up to my mind to solve the horizontal alignment was the following:

<div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="scrollDir: 'h'" style="text-align:center; white-space: nowrap;">
  <button data-dojo-type="dojox/mobile/Button">My Button 1</button>
  <button data-dojo-type="dojox/mobile/Button">My Button 2</button>
  <button data-dojo-type="dojox/mobile/Button">My Button 3</button>
</div>

Unfortunately, the previous code leaves the button aligned on the left. If I remove the 'scrollDir' property then the buttons are horizontally aligned but, of course, it's no longer possible to scroll horizontally when the sum of all the buttons width exceeds the mobile display width.

Ultimately, what I'm trying to achieve is:

  1. while the total width of the buttons is less than the mobile display width, the buttons should be perfectly centered within the container and at the same distance with respect to each other;
  2. when the total width of the buttons is greater than the mobile display width, the new buttons should be reachable by scrolling horizontally the container.

Please have a look to the previous points in picture.

I'd like to know why my attempt failed and a potential solution to my UI problem.

Thanks in advance.

Upvotes: 0

Views: 131

Answers (1)

Josh Rutherford
Josh Rutherford

Reputation: 2723

I've added the styles in CSS, but you can see how you'd add them into the data-dojo-props attribute in your case. Basically, you need to have a wrapper that overflows horizontally containing your block of buttons which don't wrap.

/* Ignore this Stuff: */
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Important Stuff: */
.wrapper {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.inner {
  white-space: nowrap;
}
<div class='wrapper'>
  <div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="scrollDir: 'h'" style="/*text-align:center; white-space: nowrap;*/" class="inner">
    <button data-dojo-type="dojox/mobile/Button">My Button 1</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 2</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 3</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 4</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 5</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 6</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 7</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 8</button>
    <button data-dojo-type="dojox/mobile/Button">My Button 9</button>
  </div>
</div>

Upvotes: 0

Related Questions