Align items horizontally, jQuery mobile

Question

I don't have much experience with jquery mobile or related mobile user interfaces, it is difficult for me to align elements horizontally.

I want to horizontally align the text box and select a tag. so that they appear in the line.

I tried data-type = "horizontal" and data-inline = "true" . but they do not work.

Here is the code I'm using,

<div data-role="controlgroup" data-type="horizontal"> <label for="cs" class="fieldLabel">option 1: </label> <select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true"> <option>options</option> </select> <input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" /> </div> 

Comments / Suggestions?

Answer 1

Answer Tom was helpful. but this work works exactly according to need

I used the following to get the required output.

  <div data-role="controlgroup" data-type="horizontal"> <table> <tr> <td width="30%"> <select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]"> <option>...</option> </select> </td> <td width="70%"> <input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" /> </td> </tr> </table> </div> 

You can use layout grids for this (see here )

But grid layouts may not give accurate results, at least in my case I did not get the necessary alignment.

Some good scripts were helpful.

Answer 2

Take a look at Text Inputs and Text Fields .

It does not support data-inline itself, but you can use data-role=fieldcontain :

 <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> 

As far as I can see, you cannot put multiple inputs next to each other using only jQuery Moblie ...

Answer 3

 <div href="#" data-role="button" style="margin:30px;">Adjust</div> 

if you want to manipulate only the right and left settings, use style="margin-left=30px;margin-right=30px;"

Answer 4

... I am still studying the jQuery Mobile platform, so I know that it’s a pain when you just need to do something, but you really should try to use what is already built in the framework, especially if you are going to create mobile applications. Do yourself a favor and find the time needed to study it.

In addition, another tip; you need to avoid using px values ​​for rendering elements, since they usually don't scale well on mobile devices, em values ​​are best suited for use in a cross platform.

I successfully used something similar to the following code to enter "inline" text and select fields with jqm. if you want the styles to be different, you can add the letter of the theme template after a separate ui-block element so that it looks like ui-block-b or ui-block-c, etc. This is all described here: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html

  <div class="ui-grid-a"> <div class="ui-block"> <label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label> <select name="cs[ps_1]" id="cs[ps_1]" data-mini="true"> <option>options</option> </select> </div> <div class="ui-block"> <input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" /> </div> </div><!-- /grid-a -->