Input item layout issues

I am creating a form that has a number of inputs of different types. When I put them in a form, I get less than desirable results. Here are the issues I am seeing:

  1. Dropdown items are not aligning (look at Company Color). How do I align them all to the right?
  2. Date items do not align vertically to the label.
  3. Label sizing is rather small (see Pay Deduction %). How do I increase label width or, better yet, make the input right-align?

Here is the screenshot of my demo app:

Here is my HTML:

<div class="list">
    <div class="item item-input item-select">
        <div class="input-label">
            Company Color
        </div>
        <select>
            <option>Blue</option>
            <option>Yellow</option>
        </select>
    </div>
    <div class="item item-input item-select">
        <div class="input-label">
            Week Start
        </div>
        <select>
            <option selected>Sunday</option>
            <option>Monday</option>
            <option>Tuesday</option>
            <option>Wednesday</option>
            <option>Thursday</option>
            <option>Friday</option>
            <option>Saturday</option>
        </select>
    </div>
    <div class="item item-input item-select">
        <div class="input-label">
            Round Times To Nearest
        </div>
        <select>
            <option selected>15 minutes</option>
            <option>30 minutes</option>
        </select>
    </div>
    <div class="item item-input item-select">
        <div class="input-label">
            Pay Period
        </div>
        <select>
            <option selected>Weekly</option>
            <option>Monthly</option>
        </select>
    </div>
    <label class="item item-input">
        <span class="input-label">Last Payday</span>
        <input type="date" placeholder="Nov 16, 2014">
    </label>
</div>

<h3>Pay Modifiers</h3>
<div class="list">
    <div class="item item-input item-select">
        <div class="input-label">
            Lunch
        </div>
        <select>
            <option selected>Lunch is Paid Time</option>
            <option>30 minutes unpaid</option>
        </select>
    </div>
    <div class="item item-input item-toggle">
        <div class="input-label">
            Add lunch by default
        </div>
        <label class="toggle toggle-positive">
            <input type="checkbox">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
    </div>
    <label class="item item-input">
        <span class="input-label">Pay Deduction %</span>
        <input type="number" placeholder="34.25">
    </label>
</div>

What version of ionic are you using? Can you try the nightly builds version of the select element, this is a styled version of the element that give a consistent feel to select items. Plus, its pretty simple markup :wink:

<div class="list">

  <div class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </div>

</div> 

I am currently using v1.0.0-beta.1. I’ll update to the nightly build and let you know how it goes.

I updated my CSS to the latest nightly build. It did fix the alignment issue but now I have another issue: the selected words are reversed. For example, if you select “This is cool” (which shows up right in the pick list), the selected value is “cool is This”. While that might be fine for a Star Wars app where you convert phrases into Yoda-ese, that doesn’t really do it for me. :smile:

Hah, no worries, I guess there are some other issue, like with the actual selecting of items, :smile: thats why its only in the nightly builds.

But I threw an example together to get things to line up correctly. You have to mess with flexbox to align things better, which is kind of a pain.

A good resource for flex box is this site,
http://the-echoplex.net/flexyboxes/

Its lets you visually see what each property does and gives you all the goodie prefixed versions.

Thanks for the help. I appreciate it.

How did you fix the words are reversed issue?

It has been a while since I looked at it but I believe an updated build fixed the issue.

Nope the issue is still not fixed.

I fixed this by removing the

`direction: rtl`

that is specified for class

`.item-select select`

cheers

1 Like