CODEWITHSUNDEEP
javascriptcssreactjsionic-framework
Monica
Monica

Reputation: 161

How to create a paragraph next to an ionic check box?

Trying to create something like this text that wraps onto more than one line and with the checkbox vertically centered relative to the lines.

Current code:

<div className = 'terms'>
   <IonCheckbox/>
   <span> paragraph </span>
</div>

CSS:

.terms {
    margin-top: 10vw;
    font-style: italic;

    ion-checkbox {
      margin-right: 2vw;
    }
  }

I need the paragraph to be a left aligned block. Instead it just wraps around the checkbox. I've tried using a variety of of things like float: left on the check-box, display: block

Upvotes: 1

Views: 308

Answers (4)

Monica
Monica

Reputation: 161

ion-checkbox {
      vertical-align: top;
      margin-right: 5px;
    }
    span {
      display: inline-block;
      width: 80%;
      font-style: italic;
      color: grey;
    }

Upvotes: 0

SmartMan21Cen
SmartMan21Cen

Reputation: 76

Use slot option in IonCheckbox

<IonItem>
        <IonLabel ><i>paragraph </i></IonLabel>
        <IonCheckbox slot="start" />
  </IonItem>

Upvotes: 2

Harry Potter
Harry Potter

Reputation: 157

I think you use flexbox;

display: flex;
justify-content: flex-start;
flex-direction: row;

Upvotes: 0

Matt
Matt

Reputation: 5428

The easy way is to stick everything into a flexbox. I don't have ionic here but it should work fine. Wrap the checkbox with a div if necessary.

<div className = 'terms' style="display:flex">
   <div><input type="checkbox"></div>
   <span> paragraph </span>
</div>

Upvotes: 0

Related Questions