CODEWITHSUNDEEP
cssjquery-mobile
hitesh israni
hitesh israni

Reputation: 1752

Align Elements horizontally, jquery mobile

I havent much experience on jquery mobile or related mobile UI frameworks, I am finding it difficult to align elements horizontally.

I want to horizontally align text field and select tag. so that they appear inline.

I tried data-type="horizontal" and data-inline="true". but they are not working.

Here's the code i am 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?

Upvotes: 2

Views: 14531

Answers (4)

Obewan
Obewan

Reputation: 140

...I am still learning the jQuery Mobile framework myself, so I know it is a pain when you just need to get something done, but you really should try to use what is already built within the framework, especially if you are going to build mobile friendly apps. Do yourself a favor and take the time needed to learn it.

Also, another tip; you need to stay away from using px values for sizing elements as that typically doesn't scale well on mobile devices, em values work best for cross platform use.

I have successfully used something similar to the following code to "inline" text input and select boxes with jqm. if you want the styles to be different - you can add the theme swatch letter after the individual ui-block element so that it looks something like ui-block-b or ui-block-c, etc. This is all documented 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 -->

Upvotes: 1

hitesh israni
hitesh israni

Reputation: 1752

Tom's answer was useful. but that dint work exactly as per the need

I used 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>

One can use layout grids for this (Refer here)

But layout grids may not give precise results, at least in my case i was not getting the needed alignment.

Some good fiddles were useful.

Upvotes: 4

NiRUS
NiRUS

Reputation: 4259

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

if you want to manipulate just right and left adjustments use style="margin-left=30px;margin-right=30px;"

Upvotes: 1

Tamara Wijsman
Tamara Wijsman

Reputation: 12348

Take a look at Text inputs & Textareas.

It does not support data-inline on its own, but you can use data-role=fieldcontain instead:

<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 can't put multiple inputs next to each other using only jQuery Moblie...

Upvotes: 1

Related Questions