CODEWITHSUNDEEP
cssionic4word-wrap
naffetS
naffetS

Reputation: 3257

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?

Upvotes: 0

Views: 2625

Answers (2)

ZeroWorks
ZeroWorks

Reputation: 1638

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!

Upvotes: 4

serraosays
serraosays

Reputation: 7859

The easiest way to solve this problem is to put a container around your input and label and use the flexbox layout model. Flexbox will automatically vertically align both the input and the label to the top of the container, and the label's wrapped text will stay inside of the checkbox.

HTML:

<div class="container">
  <input type="checkbox" name="val1" value="something">
  <label for="vehicle1"> I have a really long label that sits next to this checkbox and wraps around and around and around the box. Watch me go... </label>
</div>

CSS:

/* Set container with flex */
/* Children will automatically be aligned in a row */
.container {
  display: flex;
  margin: 15px 30px;
  max-width: 500px;
}

label {
  padding-left: 7px;
}

Demo on Codepen: https://codepen.io/staypuftman/pen/mdJJWNq

Upvotes: 1

Related Questions