Jquery Mobile select and button inline

Question

I'm trying to have a select menu and a button inline, same width as surrounding lines, see this: http://jsbin.com/hibatehepe/edit?html,output

Here it's done with field-container, but the select menu should be wider. Any ideas please?

Answer 1

You can look at this question:

How to make a div to fill a remaining horizontal space?

mystrdat's answer based on this codepen: http://codepen.io/anon/pen/mdoej can work for you.

You basically use float: right to keep the button with a fixed width all the way on the right side, and then select's container automatically fills the available width. (NOTE: I am only using inline CSS to quickly illustrate the answer, you should use CSS classes):

<div class="ui-field-contain">
  <label for="b" class="select">Vælg kategori:</label>
  <div >
    <div style="float: right; padding-left: 0.5em;" >
      <a href="#" class="ui-btn ui-shadow ui-btn-inline ui-icon-plus ui-btn-icon-right ui-corner-all" data-inline="true">Tilføj</a>
    </div>
    <div style="overflow: auto;">
      <select size="1" name="b" id="b" data-native-menu="false">
        <option value="choose-one" data-placeholder="true">MAKE ME WIDE</option>
      </select>
    </div>
  </div>
</div>

Updated jsbin