Ionic Toggle Disabled


#1

Hi,

I have a form which has several ion-toggle that captures data from the user.
I am trying to display this data in another page as a report.

I use the same ion-toggle with disabled = true to display it. But the problem is the display becomes too light and I don’t want that effect. Is there any other way to display this more neatly or is there another equivalent attribute to disabled that works better.

My code is

<ion-toggle [ngModel]="remainderval" disabled="true"></ion-toggle>```

   This is how it looks.

<img src="/uploads/default/original/3X/6/b/6be45515fab38cbf498fe1bfd9b4cbd93a62703c.png" width="690" height="442">

cheers,

SD

#2

I am not sure whether this is the best way to do it, but you can simply target the disabled items through css and set their opacity to a higher value.


#3

Hey @KishuPro.
That worked totally. Works as expected.
Though I could not add it as a css class but had to declare it inline as a style tag in my html. I think some of the inbuild style class may be overriding my custom class. Its not a deal breaker so I am good with this for now.

Cheers,
SD


#4

Glad it works for you! Yeah, as the toggle is inside an ion-item, there are two places the opacity is set. The label and the toggle itself. So, you’d need to target them both if you’d rather not use inline styles. But if it is working for now then good! :+1: