Hi.
I have my TextBox set to its default Disabled Opacity property to 0.5, which works great on the Desktop. So, for the Theme that has the backcolor as white and the TextBox forecolor to a dark grey (#3F3F3F), the disabled color just looks great. However, we’ve noticed that on mobiles (iPhone tested so far, Chrome and Safary) the Disabled color was too light, almost not possible to read. So, I went to the Theme Builder and changed the Opacity up to 1 (meaning, no opacity at all) and this had no effect on the phone, although it worked as it should on the Desktop. Do you guys know if the mobile phones have a Disable logic of their own and won’t respect the .css format?
Thanks in advance.
Ivan
Hi Ivan,
Thanks for your patience.
It looks like iOS Safari adds a default opacity of 0.4 to disabled inputs. If this isn’t overridden, you’ll see the faded textbox like you mentioned.
We’ve put in a fix for the next build.
As a workaround, you can add the following CSS to your Default.html:
<style>
input[disabled] {
opacity: 1;
}
</style>
Please let me know if you have any questions or issues!
Best,
Levie
Hi Levie.
Thank you!
The funny thing is… still not quite there. But definitely a lot better.
Cheers.
Ivan
Hi guys.
Any advice on this one?
Cheers.
Ivan
Hi Levie!
Hope you had a great weekend.
Any luck on this one?
Hi Levie.
Just curious, were you able to check the sample?
By the way, I have even changed it a little bit to make things more clear. First, to get rid of any possible issue with the Theme, I changed it to the built-in Blue-1 theme. Additionally, I added a CheckBox and a RadioButton, both in a Disabled state, to compare with the Disabled TextBox. I have attached a picture. As you can see, the disabled text color for the TextBox is extremely light, very much different from the CheckBox and the RadioButton, which show a readable disabled text. And all this, of course, only happens when the application is run on an actual cell phone, in this case, tested in 2 different models of iPhones.
Please, let me know if you think of anything to workaround this.
Cheers.
Ivan
Hi Levie.
Thanks for the reply!
That is strange. I can reproduce it with a brand new solution. Have you tried it on an actual mobile phone? Not emulator… it works just fine in Chrome emulator, but testing on 2 iPhones I have been able to reproduce it all the time.
I have put together a simple sample for you. If you run it in VS, all works fine and both TextBox in the form show with the same color. If you deploy it to a server and navigate to it through an iPhone, it should show the Disabled TextBox in a different color from the Enabled one, although in the Theme which I have provided with this sample the Disabled Opacity is set to 1.
Let me know if you need me to do anything from my side to test it.
Cheers.
Ivan
Hi Ivan,
If you save the new theme with the “Disabled” state Opacity change, it should work on mobile as well.
I tried to reproduce the issue and it shows the same on desktop and mobile.
I would recommend clearing the cache on the mobile device’s browser and see if that helps with the issue.
Also make sure you’ve properly configured the new theme in your project (web.config).
The mobile browser should respect the CSS in a similar way to desktop.
If you attach a small sample we can look at it and see if we run into the same issue!
HTH,
Levie
Please login first to submit.