CODEWITHSUNDEEP
jqueryhtmljquery-mobile
durga
durga

Reputation: 21

How to increase size of jquery mobile select

How can I make my label for my select and my select itself on the same line, and fill the width of the parent container? Anything more than 72% on my select causes it to wrap to the line below.

<div id="tabs-1" style="">
    <fieldset class="ui-grid-a">
        <div class="ui-block-a " data-role="fieldcontain" style="margin-top:0;margin-bottom:0;">
            <label for="choice" class="select" style="margin-top:10px; margin-left: 15px;">View</label>
            <div class="ui-select" style="width:72%;">
                <select id="choice">
                    <option value="Last 15 days">Last 15 days</option>
                    <option value="Last 30 days">Last 30 days</option>
                    <option value="Last 6 months">Last 6 months</option>
                </select>
            </div>
        </div>
        <div class="ui-block-b">
            <div class="ui-input-search  ui-body-c" style=" padding-left: 4px; padding-right: 4px; border:0;">
                <input id="search" class="ui-input-text ui-btn-c" type="text" data-type="search" value="" name="search-2" placeholder="Search incoming payments">
            </div>
        </div>
    </fieldset>
    <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-body-c">
        <label class="ui-input-text" style="border-right: 1px solid #cccccc;">Submitted On</label>
        <label class="ui-input-text" style="border-right: 1px solid #cccccc;">Paid To</label>
        <label class="ui-input-text" style="border-right: 1px solid #cccccc;">Status</label>
        <label class="ui-input-text">$ Amount</label>
    </li>
    <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-body-c">
        <label class="ui-input-text">09/10/2012</label>
        <label class="ui-input-text">Jeff Daniels</label>
        <label class="ui-input-text">Processing</label>
        <label class="ui-input-text">$60.00</label>
    </li>
    <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-body-c">
        <label class="ui-input-text">09/11/2012</label>
        <label class="ui-input-text">P. Smurf</label>
        <label class="ui-input-text">Completed</label>
        <label class="ui-input-text">$20.00</label>
    </li>
</div>

Upvotes: 2

Views: 1528

Answers (1)

Ouadie
Ouadie

Reputation: 13185

try to replace :

   <label for="choice" class="select" style="margin-top:10px; margin-left: 15px;">View</label>
   <div class="ui-select" style="width:83%;">
      <select id="choice">
         <option value="Last 15 days">Last 15 days</option>
         <option value="Last 30 days">Last 30 days</option>
         <option value="Last 6 months">Last 6 months</option>
      </select>
    </div>

by :

<div class="ui-grid-a">
    <div class="ui-block-a" style="margin-top:10px;  text-align:right"><label>View :  </label></div>
    <div class="ui-block-b">
    <select id="choice">
        <option value="Last 15 days">Last 15 days</option>
        <option value="Last 30 days">Last 30 days</option>
        <option value="Last 6 months">Last 6 months</option>
    </select></div>
</div>

Upvotes: 1

Related Questions