Change CSS properties of ionic button

Question

I am looking for help with changing some CSS properties of my button in my Ionic app.

I want my button to look like this:

This is how it looks like now:

I have figured out that if I want to achieve my desired look I have to change the CSS property justify-content: center; of the DOM generated div with class button-inner to justify-content: space-between;... the problem is I don't know how to properly target this element in my SCSS file... I have tried with bellow examples as seen in the docs but nothing works...

  .button-native {
    span {
      justify-content: space-between;
    }
  }
  ion-button:scope(native) {
    span {
      justify-content: space-between;
    }
  }
  ion-button:scope(native) {
    .button-native {
      justify-content: space-between;
    }
  }
  ion-button:root(native) {
    span {
      justify-content: space-between;
    }
  }
  ion-button:root(native) {
    .button-native {
      justify-content: space-between;
    }
  }

Here is also my HTML markup for the button:

<ion-button expand="block">Add to cart <span>{{ 123 }} €</span></ion-button>

what am I missing? What am I doing wrong?

StackoverBlows · Accepted Answer · 2022-11-28 17:32:20Z

2

Don't use the ion-button tag you wont be able to change the css since it's styles lay in the shadow dom.

Instead create a button in a div and use ionic's ripple effect to simulate the button effect when clicked:

<div class="btn-container ion-activatable ripple-parent rectangle" (click)="doSomething()">
  <ion-ripple-effect></ion-ripple-effect>
  <div class="label">
    <span>Add to cart</span>
  </div>
  <div class="amount">
    <span>€</span>
  </div>
</div>

.btn-container {
  background-color: blue;
  border-radius: 8px;
  height: 40px;
  width: 240px;

  .label {
    margin: 8px;
    float: left;
    color: white;
    font-weight: 500;
  }

  .amount {
    margin: 8px;
    float: right;
    color: white;
    font-weight: 500;
  }
}

answered Nov 28, 2022 at 17:32

StackoverBlows

9675 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AmirAli Saghaei · Accepted Answer · 2022-11-28 13:12:58Z

-1

I don't know how to change inner-button, but since the span is flex, the solution that I've used is this:

<ion-button expand="block">Add to cart 
<div style="flex-grow: 10;"></div>
<span>{{ 123 }} €</span></ion-button>

answered Nov 28, 2022 at 13:12

AmirAli Saghaei

8916 silver badges12 bronze badges

1 Comment

weinde Over a year ago

Thank you! :) Altho this really works and I will use this solution for now I'd still like to see the propper way of dealing with my issue.

Collectives™ on Stack Overflow

Change CSS properties of ionic button

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related