Как удалить вычисленное заполнение из кнопки ion, когда она отключена

#css #angular #ionic-framework #ionic5

Вопрос:

Ионная кнопка, когда она отключена, выглядит так, как будто у нее два цвета фона в IOS. Я использую ионную кнопку с отключенным свойством, как это

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

Вот как это выглядит, когда —

Форма недействительна

Форма действительна

При проверке я обнаружил, что это ВЫЧИСЛЕННОЕ заполнение-встроенное начало: 16 пикселей; и заполнение-встроенное окончание: 16 пикселей; это вызывает такой фон;

Я не использую никакого дополнительного css-стиля на кнопке. И этот вид фона виден только тогда, когда вы создаете приложение для ios и запускаете его в симулятор или устройство.

Итак, как удалить эту прокладку ?

1. добавьте правило css, которое будет гласить — когда кнопка отключена, удалите заполнение

2. @Yuriy Спасибо за ответ, но при отключенной кнопке не добавляется дополнительный css. Это вычисляемый стиль, который как бы добавляется в DOM при загрузке страницы. Я попытался установить эти свойства в css, но это ничего не дает.

3. Вы можете использовать привязку атрибутов. Это будет похоже на [class.disabled]=»!LoginForm.valid «, где отключен будет класс с заполнением:0 пикселей, который вам нужно определить в scss.

4. Спасибо @SarathMohandas, я уже упоминал, что именно вычисляемый стиль вызывает такое поведение. Я уже пробовал это, но это не работает.

Ответ №1:

Я бы рекомендовал использовать ngClass в сочетании с классом css:

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

В классе css добавьте !important , чтобы перезаписать начальные и конечные значения заполнения 16 пикселей.

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