Ionic Item with Left and Right Aligned Text

Ionic item with left and right aligned text

This can be done using basic CSS properties. there is nothing specic about ionic here. This can be done using float:left and float:right properties.

Still for your reference, you can go through this link.

How to align the ion input text with some other element on the side

There are many ways to do this, all of them lay in the obscure and mysterious subject of vertical aligning with css. One of the most usual and quick ways to achieve it is using auto vertical margin for the children elements. So do this and your elements will align vertically:

<ion-item>
    <h4 item-left style="margin: auto 0">
          UserName:
    </h4>

    <ion-input placeholder="UserName" class="ion-padding" style="margin: auto 0"> 
    </ion-input>
</ion-item>

More info: https://css-tricks.com/centering-css-complete-guide/

Anyway I would recommend you to switch to display: flex, as usually quickly satisfies all your needs when writing a mobile app UI. In this case, h4 brings problems, use div instead. Like this:

<ion-item style="display: flex; align-items: center">
        <div item-left> UserName: </div>
        <ion-input placeholder="UserName" class="ion-padding"></ion-input>
</ion-item>

Take a look here for an overview on display: flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If it helped you, help me back with an upvote.

Ionic 2 & ion-item with left & right text

I did end up using item-left and item-right. I had to use <span> tags, not <div> as suggested above, in order to keep things on the same line.

My other issue was simply leaving enough space for the content in ionic's responsive grid. My thought was if an ion-card fit well on a phone, I should easily be able to fit 2-3 on a tablet. Turns out that's not always the case, depending on the content.

So, if things get smashed on different form-factors, the grid setup likely needs to be adjusted. Some common sense lacking on my part!

Aligning Right in Ionic

You don't need to write css for it. Ionic framework already has solution of this.
There exist slot property in Ionic which has start and end value.

you need to put slot="end" on ion-icon.

<ion-item>
    <span>
      Every Sunday
    </span>
    <ion-icon slot="end" class="right" name="checkmark"></ion-icon>
  </ion-item>

Hope it will help.

How to align ion-label to right?

Just use text-align instead of float.

.alignme {
    text-align: right;
}

Btw you should use ion-label only with forms - ion-input, ion-checkbox etc.

Align text right Html Ionic

Add a css class as

.item {
    position: absolute;
    right: 0px;
    width: 300px;
    padding: 10px;
}

How to center ion-item-divider text in Ionic 4

I ended up doing this:

  <ion-item-divider>
    <div style="width: 100%; text-align: center;">PLEASE CENTER ME!!</div>
  </ion-item-divider>

ugly :(

---

Related Topics