CODEWITHSUNDEEP
jqueryhtmlmobile
Shiva Saurabh
Shiva Saurabh

Reputation: 1289

how to place controls side by side in Jquery mobile

I have a button with data-icon="home" and a input of type search which has to be placed side by side. But it is displayed one below another. How can i display it side by side?. It is creating its own div tags when seen in browser. Is it possible to display it side by side?. Here is my code for developing a mobile application using HTML5 and jquery mobile.

Upvotes: 0

Views: 694

Answers (2)

Shiva Saurabh
Shiva Saurabh

Reputation: 1289

I am placing the answer for my own question after getting solution.

I found the solution to this by placing the controls in a div 

<div data-role="controlgroup" data-type="horizontal">
<control1>
<control2>
<control3>
</div>

here the 3 controls are placed side by side. when we put the data-role="controlgroup" and data-type="horizontal"of jquery mobile, i am able to get the controls side by side.
Here control1, control2 and control3 may be any controls such as image, anchor tag or any control.

Upvotes: 0

krilovich
krilovich

Reputation: 3505

If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content so the buttons sit on the same line.

<p>
    <a href="#" data-role="button" data-inline="true">True</a>
    <a href="#" data-role="button" data-inline="true">False</a>
</p>

source - http://view.jquerymobile.com/1.3.2/dist/demos/widgets/buttons/#inline&ui-state=dialog

Upvotes: 0

Related Questions