Book Image

jQuery Mobile First Look

Book Image

jQuery Mobile First Look

Overview of this book

Table of Contents (17 chapters)
jQuery Mobile First Look
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Displaying buttons


We can go on customizing the look of our buttons well beyond just placing them on a page or just changing their icons or color. In fact, we can further tweak their appearance, relative to the page.

Inline buttons

By default, buttons take up the whole page width, as they are displayed as block-level elements.

We can, however, override the default settings and make buttons as wide as they need to be in order to correctly contain the button text. This is achieved by adding a data-inline="true" attribute to the button element:

<a href="inline.html" data-role="button" data-inline="true">Inline button</a>

We can see the difference in the following screenshot:

In the case we have multiple buttons we wish to display inline, side-by-side, we can wrap them into a div element which has a data-inline="true" attribute.

This will cause the buttons to sit side-by-side on the same line, thanks to the container element which provides the inline attribute. If buttons are too large...