Left align select in form

1

Hi,

i would like to know the easiest way to left align a select item in an form. When used in combination
with other inputs the select is always right and other inputs left aligned.

<label class="item item-input">
    <span class="input-label">FieldA</span>
    <input type="text" ng-model="fieldA">
</label>

<label class="item item-input item-select">
    <span class="input-label">Typ</span>
    <select ng-model="fieldB">
         <option>VAL1</option>
         <option>VAL2</option>
    </select>
</label>

The question was already posted some time ago, but without any answer:
Previous Post

2

Here’s a simple CSS tweak that worked for us:

.item-select select
{
    right: auto;
    padding: 13px 45px 15px 0px;
    direction: ltr;
}

You just have to make sure that you put this in a separate CSS that loads after the Ionic styles. The one little caveat is that the arrow is displayed all the way to the right side of the form, so potentially there could be a ton of whitespace between the text and the drop-down arrow. If you can live with that, this will do the trick.

4 Likes
3

Or instead of trying to align the select text to the left why doncha just align the text input to the right?

4

Thank you for sharing this !

5

Here is what worked for me, based on @hanthomas answer:

.item-select select {
  max-width: 100%!important;
  width: 100%!important;
  right: auto!important;
  direction: ltr!important;
  padding-left: 0!important;
}
6

Guys, why all the drama?

<label class="item item-input item-select">

.item-select select {
    float: right;
}

Works just fine

7

Ionic 2+
Add to your scss. It’s work for me and others.

    ion-select {
        padding-left: 0!important;
    }