IONIC CSS - merge <input> and <select> into a single line?

ionic-v1
1

Hi, I am looking to merge a form <input> and <select> into a single line. I have come up with my own way but it loses most of the IONIC formatting. It works, but its not as clean as the ionic code.

What I have is working, but its not as clean as the ionic defaults:

  <div class="item item-input-inset">
      Send
      <select id="tag1">
      <option>Msg 1</option>
      <option selected>Msg 2</option>
      <option>Msg 3</option>
      </select> 
       in <input type="text" id="tag2"> min
    <button class="button button-small">
      Go
    </button>
  </div>

My preference would to use something like:

  <div class="item item-input-inset">
    <label class="item item-input item-select">
      Send <select id="tag1">
      <option>Msg 1</option>
      <option selected>Msg 2</option>
      <option>Msg 3</option>
    </select>
    </label>
    <label class="item-input-wrapper">
      in <input type="text" id="tag2"> min 
    </label>
    <button class="button button-small">
      Go
    </button>
  </div>

The above is my preference. However, even though they are both on a single line, doing so this causes the select menu and the input field to over lap one another…unless there is a way to change the width of the input or select field that I haven’t been able to find yet?

2

You can use the grid system, where the item is also the row. See this codepen: http://codepen.io/brandyshea/pen/NqxRMN?editors=110

I took the code for the select and input directly from the docs but removed the item class on each.

Also, please don’t create multiple topics for the same issue. :smile: