CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecordova
eb1
eb1

Reputation: 2947

Formatting toolbar with multiple groups in jquery mobile

I've been playing around a bit with jQuery mobile and PhoneGap, investigating the possibility of creating an app for some content creation on tablets.

I'd like to be able to create a formatting toolbar similar to the example shown over at jQuery UI, but using jQuery mobile instead. Unfortunately, when I attempt to place multiple controlgroup items together, they each end up on their own line on the page rather than next to each other on the same line:

<div data-role="footer" data-position="fixed">
  <div data-role="controlgroup" data-type="horizontal" >
    <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext">One</a>
    <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext">Two</a>
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Three</a>
  </div>
  <div data-role="controlgroup" data-type="horizontal" >
    <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext">Four</a>
    <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext">Five</a>
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Six</a>
  </div>
</div>

This ends up on two rows in the footer. I've tried using data-inline="true", but it doesn't appear to work on the div elements. Any ideas?

Upvotes: 0

Views: 272

Answers (1)

Nathan Breit
Nathan Breit

Reputation: 1671

If you add display:inline-block; styles to both controlgroups they will appear on the same line so long as there is enough screen real-estate.

examle

Upvotes: 1

Related Questions