CODEWITHSUNDEEP
jquerycssjquery-mobile
M Rajoy
M Rajoy

Reputation: 4114

jquery mobile select fo fill remaining space

How can I make a select fill the whole screen while surrounded by two fixed width buttons within a button group?

<div data-role="fieldcontain">
    <ul data-role="controlgroup" data-type="horizontal">
        <li><button type="submit">&lt;</button></li>

        <li><select name="select-mes" id="select-mes">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
        </select></li>
        <li>
            <button type="submit">&gt;</button>
        </li>
    </ul>
</div>

This creates a small button bar aligned to the left. I want the select in the middle to fill the remaining space (which would be variable depennding on the screen)

A fiddle with my example: http://jsfiddle.net/kelmer/kq1r33nz/

Upvotes: 2

Views: 232

Answers (1)

Omar
Omar

Reputation: 31732

I made some changes to your HTML structure. 

<div class="ui-content">
    <div class="ui-field-contain">
        <div data-role="controlgroup" data-type="horizontal">
            <button type="submit">&lt;</button>
            <select name="select-mes" id="select-mes">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
            <button type="submit">&gt;</button>
        </div>
    </div>
</div>

First, add display: table to controlgroup inner wrapper .ui-controlgroup-controls. For the inner elements, make them table-cell by adding display: table-cell and removing floating float: left.

.ui-controlgroup-horizontal .ui-controlgroup-controls {
    width: 100%;
    display: table;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls > * {
   display: table-cell;
   float: none !important;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
    width: 100%; /* let selectmenu occupy available width */
}

Demo with ui-field-contain wrapping controlgroup

Demo without ui-field-contain

Upvotes: 2

Related Questions