css - How to remove computed padding from ion-button when it is disabled

Question

Ionic Button, when disabled appears like it have two background colors in IOS. I am using ionic button with disabled property like this

<ion-button expand="full" type="submit" [disabled]="!loginForm.valid (click)="login()">Login</ion-button>

Here is how it looks when -

Form is Invalid

Form is valid

On inspecting i found, it’s the COMPUTED padding-inline-start: 16px; and padding-inline-end: 16px; that is causing this kind of background;

I am not using any extra css styling on the button. And this kind of background is visible only when you build the app for ios and run it into simulator or device.

So, How to remove that padding ?

标签： cssangularionic-frameworkionic5

Answer 1

我建议将 ngClass 与 css 类结合使用：

[ngClass]="!loginForm.valid? 'no-start-end-padding'".

在 css 类中添加!important以覆盖 16px 开始和结束填充值。

.no-start-end-padding {
    padding-inline-start: 16px !important; 
    padding-inline-end: 16px !important;
}