CODEWITHSUNDEEP
jquery-mobile
rayray
rayray

Reputation: 931

Jquery mobile grouping buttons and input box

In JQuery Mobile, I am trying to group buttons with an input box in the middle. Below is my code

<div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button">Yes</a>
        <input type="text"  value="0" min="0" max="20" size="2"  />
        <a href="#" data-role="button">Maybe</a>
    </div>

This is the result

Any ideas would be great?

Upvotes: 2

Views: 5559

Answers (3)

Kevin H.
Kevin H.

Reputation: 73

This solution works for me and hope it helps someone else seeking the same.

.controlgroup-textinput{
    padding-top:.22em;
    padding-bottom:.22em;
}
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
    <a href="#" data-role="button">Yes</a>
    <input type="text"  value="0" min="0" max="20" size="2" data-wrapper-class="controlgroup-textinput ui-btn" />
    <a href="#" data-role="button">Maybe</a>
</fieldset>

Upvotes: 0

den232
den232

Reputation: 730

The radio buttons need an aggressive case of display:inline !important; ... Here is a list with 2 lines, one normal buttons and one mini's.

Hope it helps. http://jsfiddle.net/den232/5mVv8/

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}

<div data-role="page" class="type-home">


<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">A1</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">B1</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="left" class='biginputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">AA</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">BB</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="e2" class='miniinputheight'></input>
    </div>  

     <div class='floatright closespacing'>
      <div  class='floatright textwidth'>
        <input type="text" placeholder="e3" class='miniinputheight'></input>
      </div>  
    </div>
  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->

Upvotes: 1

joshb
joshb

Reputation: 5220

By default buttons take up the entire width of the view port. Try using the data-inline attribute to change that.

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-inline.html

You'll also need some css to get the input looking right. The following seemed to work for me. You'll probably need to adjust the width depending on what you're going for.

input.ui-input-text {
    float: left;
    position: relative;
    display: inline-block;
    width: 50%;
}

Upvotes: 0

Related Questions