Inset input (item-input-inset) : right align input fields?

ionic-v1
1

Hi,

I’m not a web developer originally so this might be real basic stuff. But I’ve tried and tried and it’s driving me crazy! So I have a list with inset inputs that looks like this:

image

I simply want the input fields and their texts to be right-aligned. How do I do that? This is the code:

<div class="list">
  <div class="item item-input-inset">
    <label class="input-label">Some rather long text</label>
    <input type="number" placeholder="input field">
  </div>
  <div class="item item-input-inset">
    <label class="input-label">Another rather long text</label>
    <input type="number" placeholder="input field">
  </div>
</div>
2

inspect css styles in chrome

3
1 Like
4

Thank you @brobov1989, the chrome inspector is great. And the emulator is also really helpful. I was able to find a solution that works for me by specifying a fixed width for the components and telling flexbox to expand the second component. I know this is not very elegant, and if anybody sees a better way, please do tell.

html

<form name="form">
  <div class="item item-input-inset">
    <label class="input-label my-label">Some rather long text</label>
    <input class="my-input" type="number" placeholder="input">
  </div>
  <div class="item item-input-inset">
    <label class="input-label my-label">Another rather long text</label>
    <input class="my-input" type="number" placeholder="input">
  </div>
</form>

css

.my-label {
    width: 220px;
    max-width: none;
}

.my-input {
    text-align: end;
    width: 60px;
    min-width: 60px;

    /* generated by http://the-echoplex.net/flexyboxes/ (to make input field expand) */
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
5

Sadly, this doesn’t work if you limit the size to, say, iPhone 5 dimensions (320x568).