CODEWITHSUNDEEP
javascriptjquery-mobileselect
wivku
wivku

Reputation: 2643

full width select menu combined with buttons in jQuery Mobile

I am trying to get a footer toolbar, consisting of two buttons (prev/next) and a selectmenu. How can I make the selectmenu use the full width?

See jsFiddle example for details.

Using a controlgroup makes it look the way I want/need, except that it does not fill the full width. I also experimented with fieldset, navbar, grids, but so far not the wanted result.

<div data-role="controlgroup" data-type="horizontal" id="footerControlgroup" >
  <button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext ui-mini">Prev</button>
  <button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext ui-mini">Next</button>
  <select id="select" data-mini="true">
    <option>pick me...</option>
  </select>
</div>

Upvotes: 0

Views: 642

Answers (2)

wivku
wivku

Reputation: 2643

Rick pointed me in the right direction, thanks.

Here is the complete solution: jsFiddle.

The key part of the solution:

var select = $("#mySelect");
var cWidth = 0;
select.closest(".ui-controlgroup-controls").children().not(".ui-select")
    .each(function() { 
        cWidth += $(this).outerWidth();
        $(this).outerHeight( select.closest(".ui-select").height() +0.5 );
    });
select.closest(".ui-select").find(".ui-btn")
  .outerWidth( select.closest("[data-role='controlgroup']").width() - cWidth -1);

The tricky parts that it deals with:

  • jQuery Mobile inserts various elements to enhance the select
  • jQuery Mobile has two types of select menu's: native, or custom (option list enhanced by JQM)
  • jQuery Mobile select can be full size or data-mini="true"
  • traversing is slightly different when using inside a footer (although the DOM structure is the same)
  • I made it generic so the number of elements (e.g. buttons) before or after the select is variable
  • this is a static function, so I bind it to a .resize to adjust the width when resizing the browser

In case you are interested: the structure of the jQuery Mobile select menu's:

native select

div data-role=controlgroup
    div .ui-controlgroup-controls
        button #prev .ui-btn 
        button #next .ui-btn
        div .ui-select
            div #<selectId>-button .ui-btn          <== adjust width
                span <text of first item>
                select #<selectId>                  <-- starting point

custom select

div data-role=controlgroup
    div .ui-controlgroup-controls
        button #prev .ui-btn 
        button #next .ui-btn
        div .ui-select
            a #<selectId>-button .ui-btn            <== adjust width
                span <text of first item>
            select #<selectId>                      <-- starting point
            div #<selectId>-listbox-placeholder

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

This may get you going:

var next= document.getElementById('next');
var select= document.getElementById('select');
select.style.width= 
  (select.parentNode.offsetWidth -
   next.getBoundingClientRect().right
  )+'px';

Upvotes: 1

Related Questions