Any way to make read-only field more readable ?

TakadaGuna

Hello,

I have a question about read-only fields. Right now the default read-only field would be grey color on top of lighter grey color. Even though I believe this is related to browser defaults, I am wondering if we can somehow modify to make it more readable. There are a lot of uses where I want to present the form to my users to read, but not to modify (usually to prevent accidental changes).

I know I can simply set "no data actions" in the properties without making the fields read-only, thus not showing the new and save buttons. However, the cursor may still do dropdowns and other things (even though the changes are not saved). I am wondering if there is a more graceful way to show read-only fields.

Thank you in advance.

lsw-fabian

TakadaGuna Hi @TakadaGuna at the moment there is no other way to display read only information.
With a professional licence you could change the look & feel of these fields.
Maybe we will find a better solution - suggestions are always welcome 🙂

gabriel

I´ve never seen readonly fields be displayed so badly - they should not look like this. The color of field backgrounds and fonts are controlled by the CSS of the REI3 platform, so it should not be affected by browser choice - unless your browser/extensions are specifically changing these CSS rules.

May I ask what kind of browser you are running?

TakadaGuna

Hello again,

Thank you for the prompt replies. Following up Gabriel's pointer, I found out this is happening specifically with Safari in MacOs. I tried using firefox and it was much better.

Anyways, I play around with CSS in web developer mode, and changing --color-font-disabled to be black would make it much better with firefox but somehow still not as good in Safari. I guess it has something to do with webkit or something MacOS Safari uses. Right now, I found it simpler to just move to firefox to open our application.

So right now my solution is using firefox with css-related extension (with just one line of code). One day I hope our company can get the professional license to play around with CSS and other nice things 😊, that would surely solve the problem.

Thank you for the pointers! And thank you for this platform, this has been a life saver.

gabriel

Safari... what a pain. 🙂

We had to buy a Mac for our office just for testing Safari related issues. Guess I have to boot it up again and have a look at what it does to our CSS.

TakadaGuna

I hate to give you more problems 😬 but I found out that using iOS (iPhone and iPads) is even worse because that behavior happens not just with Safari but also with other browsers like Chrome and Opera.

Actually there are several discussions circulating in the internet about this, some of them mention forcing -webkit-text-fill-color property of disabled input in CSS. For example: http://blog.iamvdo.me/post/42510603205/styler-les-input-inactifs-disabled-sur-ios-iphone . I tried them and it seems to work. I am still trying other stuff as well, though.

gabriel

No worries, always feel free to report please 🙂

I did not check it out yet, but setting obscure CSS rules for specific browser engines is often the solution for these kinds of issues. And other browsers having the same issue on iPhones etc. makes sense if they all use the Safari web browser engine, which they were forced to by Apple for a long time. I thought this had or would at least soon change, but it would explain the situation.