Ion-item layout

Ionic Framework ionic-v3
1

Hello,

I’m building some form page, and I would like to display the form errors below the inputs.
The inputs are displayed as ion-items in an ion-list.
Now I’m struggling with the layout of these items. Depending on the presence of a label, the layout seems to be totally different.

I want a layout like in a multiline item :

<ion-item>
    <h4>h4, should be replaced by a label (stacked)</h4>
    <p  class="formerror">
      Error message
    </p>
    <button ion-button 
            icon-only 
            dark clear
            item-right>
      <ion-icon name="help-circle"></ion-icon>
    </button>
  </ion-item>

The header is displayed on the left, the error message is displayed below, and at the right side, I have a button to display some help.

The header should of course be replace by a label, but if I do so, the layout is totally changed.

    <ion-item>
    <ion-label stacked>Label</ion-label>
    <p  class="formerror">
      Error message
    </p>
    <button ion-button 
            icon-only 
            dark clear
            item-right>
      <ion-icon name="help-circle"></ion-icon>
    </button>
  </ion-item>

The p element is not shown at all. The button is correctly displayed.

Ok, I probably need to add the item-content attribute to the p element :

<ion-item>
    <ion-label stacked>Label</ion-label>
    <p  class="formerror"
        item-content>
      Error message
    </p>
    <button ion-button 
            icon-only 
            dark clear
            item-right>
      <ion-icon name="help-circle"></ion-icon>
    </button>
  </ion-item>

This time, the p element is shown, however it is centered, and I want it aligned to the left.
I can make the text left-aligned by modifying the align-items attribute to flex-start.

But I can’t see how I am supposed to change it through directives.

I don’t seem to understand well how an item is layed out depending on its elements.

Am I missing something ?

Thanks,

Bart

2

I noticed the layout inconsistencies as well but I’ve found something that works for my uses. Try putting the error container inside of ion-label:

<ion-item>
  <ion-label>
    My Label
    <p>Error or help messages go here</p>
  </ion-label>
</ion-item>

This should cause the <p>...<p> container to display underneath the label. This works really well with buttons or toggles that can are positioned to either side of the label.

Hope this helps.

Mihai