CODEWITHSUNDEEP
htmlcssionic-frameworkcheckboxsass
gaurang
gaurang

Reputation: 2240

how to remove space from ion-label while using with checkbox in ionic framework

I want to use checkbox, but there is blank space inside ion-label. i'm unable to remove space from ion-label. I want to display checkbox horizontally centre. my code is as below, can any one help me to solve this?

    <ion-item text-center no-lines>
        <ion-label color="secondary">
            keep me signed in
        </ion-label>
        <ion-checkbox item-right [(ngModel)]="Remember"></ion-checkbox>
    </ion-item>

enter image description here

Upvotes: 6

Views: 4835

Answers (3)

Sachin Chillal
Sachin Chillal

Reputation: 531

Ionic 6 and later versions (including Ionic V8) require using CSS ::part pseudo-element to style internal elements of Ionic components. To style the label of an ion-checkbox in Ionic V8, use the following CSS:

ion-checkbox::part(label) {
    margin-inline-start: 0.5rem;
}

This will add a margin of 0.5rem to the start of the label inside the ion-checkbox element.

Upvotes: 1

Hyuck Kang
Hyuck Kang

Reputation: 1789

My solution is not fancy, but works.

In your corresponding *.scss

ion-item{
    .input-wrapper{
        flex:none;
        margin-left: auto;
    }
    ion-checkbox.checkbox{
        margin-right: auto !important;
    }
}

Upvotes: 6

Sarah.M.M
Sarah.M.M

Reputation: 1

good morning hope this cloud help you 

ion-item.item-input {
    padding-left: 0;
}

Upvotes: 0

Related Questions