Form inputs get readonly class while they can be editted

Johan den Ouden

Question

I have a problem with the form component.

When the inputs on the form can be editted but do not have the focus they get the class readonly.
So the background becomes gray.
When an input is really readonly (enabled = false) there is also the class readonly (and ther readonly attribute is set to readonly).
For the user there is no diffence between readonly because of is has not the focus or the control is readonly because it can not be editted.
In the first senario the readonly class should me be placed on the input. Give it a "nofocus" class or something.

Version: 9.0.1.35

15 Feb 2016

Vera Tiago

Staff

Hi Johan

I agree with you, for the user's eyes there is no difference. I had this issue once, and my workaround was to override the css style - readonly - to have a different background color.

screenshot here:
https://screencast.com/t/8JLyGiXLK4X

Vera

16 Feb 2016

Johan den Ouden

Hi Vera,

Thanks for your reply. I did the same thing and also added my own class "RealReadOnly" when I disable the control.

Is this the way to report the bug or should I report it somewhere else?

16 Feb 2016

Vera Tiago

Staff

Not sure if it's a bug or a feature :)
But you can send your feedback directly to the team here:
https://www.outsystems.com/forge/component-discussions/916/Silk+UI+Framework

by clicking on "Send feedback" button

cheers

16 Feb 2016

Johan den Ouden

Okay but it is not an SIlkUI issue but a forms issue :)

16 Feb 2016

Martijn Habraken

We encountered also this problem:
https://www.outsystems.com/forums/discussion/16646/from-input-get-class-readonly-but-enable-true/
It looks like it’s a Liverpool/SilkUI thing. In London this doesn't happen by my notice.

29 Feb 2016

Pratham Polekar

how can I remove the read-only class in edit mode?

I am facing same issue as Vera Tiago.

16 Mar 2018

Antonio Gerard

Hi,

I'm facing the same problem on Service Studio 11 Traditional Web, I removed the Style Class "form" of the form component, after that, some pencil icons apeared under the inputs, so I had to define this in the CSS:

span.FormEditPencil{
    display:none;
}

and it was solved. I don't know any other consequences of it, but until now its ok!

If any of you know problems in doing it, i'd like to know.

Thks

09 Apr 2020

Tom Zhao

HI guys

Sorry for digging up this old post. But the issue still exists. Especially when you using pop-up or modal.

Does anyone have a solution to this issue?

Best Regards

24 Aug 2020

Jorge Martins

MVP

Hi Tom,

The original issue seems to be unrelated with Popups or Modals.

Can you please create a new topic and explain in more detail what are you experiencing? Don't forget to include what platform version you are using, what UI framework version you are using, and the circumstances under which you have the issue (only with Modals, only with Popups, with both, even without using those two, etc)

Thanks!

24 Aug 2020

1 reply

29 Aug 2020

Show thread

Hide thread

Tom Zhao

Jorge Martins wrote:

Hi Tom,

The original issue seems to be unrelated with Popups or Modals.

Thanks!

Hi Jorge

Thank you for your reply. I attached a sample oml.
I know if I move modal to footer the issue will be solved. But for some reason in my real app I can't do this.

Best Regards

TEST.oml

29 Aug 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines