CODEWITHSUNDEEP
cssionic-frameworkionic3
Paulius Nyoumi
Paulius Nyoumi

Reputation: 189

How to resize ion-item-options button

i want to change width of the red button

i'm trying to resize the button of ion-item-options sliding button with Sass Variables or css.

Upvotes: 2

Views: 1662

Answers (4)

Omar Errabaany
Omar Errabaany

Reputation: 55

I noticed that the width of the button is being calculated automatically based on width of the content. so I wrapped button content in div and I added margin to it you can adjust css as you want,

<ion-item-options side="end">
    <ion-item-option color="danger">
        <div class="content">
            <ion-icon slot="start" name="trash-outline"></ion-icon>
            {{ "LABELS.DELETE" | translate}}
        </div>
    </ion-item-option>
</ion-item-options>

scss

ion-item-option {
    text-transform: none;

    .content {
        margin: 0 2rem;
        margin: 0 2rem;
        display: flex;
        align-items: center;
    }

    ion-icon {
        font-size: 1rem;
        margin-right: 0.75rem;
    }
}

Upvotes: 0

Patrick
Patrick

Reputation: 165

I've achieved it by doing the following:

    <ion-item-options class="itemOptions"> <!--add a class to the options -->
        <ion-item-option color="danger" class="itemOption"> <!--add class to each individual option -->
            <ion-icon name="trash" color="dark"></ion-icon>
        </ion-item-option>
        <ion-item-option color="secondary" class="itemOption"> <!--add class to each individual option -->
            <ion-icon name="pencil"></ion-icon>
        </ion-item-option>
    </ion-item-options>

Then in your scss:

.itemOptions {
    width: 200px; // cacluate the total with of items (itemOption = 100px, so 100 x 2)
}

.itemOption {
    width: 100px; // width of a single item option
}

I hope that solves your problem!

Upvotes: 1

Kirsten
Kirsten

Reputation: 181

for Ionic 5 has to be done via shadow:

ion-item-option::part(native) {
  min-width: 100px;
}

Upvotes: 2

Paulius Nyoumi
Paulius Nyoumi

Reputation: 189

i just change buttton width in my scss file like this 

ion-item-options > button{
    width: 59px;

}

Upvotes: 1

Related Questions