cssionic4word-wrap

In an ion-item with a checkbox, when you set it to wrap, how do you make the checkbox align on the top?

I have an ion-list, and every item has an ion-checkbox and an ion-label. Kind of like a todo list. The problem is: I have the text on the label set to wrapping (class="ion-text-wrap"), but the alignment is not how I'd like it:

I'd like the checkbox to be aligned at the top, not in the middle. Is there a way to do this?

Solution

  • The ion-item is display flex through item-native css class. So you just have to select check-box and align-self: start; to display it at top:

    <ion-list class="checklist">
    <ion-item>
        <input type="checkbox">
        <label class="ion-text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu mattis, auctor velit ut, suscipit lacus.</label>
    </ion-item>

    <ion-item>
        <input type="checkbox">
        <label class="ion-text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu mattis, auctor velit ut, suscipit lacus.</label>
    </ion-item>
</ion-list>

    with css:

    .checklist ion-item > input {
    align-self: start;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
}

    Will render:

    enter image description here

    Tested on ionic 4, also why don't you use ion-checkbox?

    Hope it helps!