Skip to Content (Press Enter)
2018-12-11 13-32-05
Martijn Habraken
1961Views
9Comments
From input get class ReadOnly but enable = true
Question
CSS
OutSystems Widgets
Hi all,

Like the title explains.
I created an Form with input fields in a module with Liverpool as theme.
All of the fields are edible but still they all get the following CSS class from: Form.css
.Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly {
    background: #fafafa none repeat scroll 0 0;
    color: #333;
    font-size: 16px;
}

Why does it get this class?
I solved the problem by overwriting the unneeded class elements but this is not good coding off course.

Thanks all!
 
0
0
16 Nov 2015
Copy Link
2012-03-16 12-21-09
João Rosado
Staff
Hi Martijin,

Check the properties of the Form. It has a enabled property that overrides the children inputs.


Regards,
João Rosado
0
0
16 Nov 2015
Copy Link
2018-12-11 13-32-05
Martijn Habraken
Hi João,

The form also has Enable = True.
In the application the inputs are also editable, just discovered that when I click in one of the input the Read-only class disappears.

Regards,
Martijn
0
0
16 Nov 2015
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Yeah, I noticed that last week when I was doing some styling. A bit odd to call something "ReadOnly" when it's not read only...
0
0
16 Nov 2015
Copy Link
2015-04-07 15-19-51
Braxton
What is the resolution to fix this? We are having this exact same problem on quite a few different datetime text input fields, and it makes it impossible to edit the input, or even close the datetime silk widget.

From: Theme.Patterns_SilkUI:
input[readonly="readonly"],
input[disabled="disabled"],
select[disabled="disabled"] {
    background-image: none;
    color: #999;
    cursor: text;
}

And from the HTML:
<input name="LiverpoolTheme_wt8$block$wtMainContent$wt5$wtDateTimeStartInput" type="text" value="04-01-2015 00:00:00" maxlength="50" id="LiverpoolTheme_wt8_block_wtMainContent_wt5_wtDateTimeStartInput" tabindex="14" class="ThemeGrid_Width5" onkeydown="return OsEnterKey('LiverpoolTheme_wt8_block_wtMainContent_wt5_wt18', arguments[0] || window.event)" style="margin-left: 10px; background: none;" readonly="readonly" placeholder="MM-DD-YYYY HH:mm:SS">


For some reason readonly="readonly" which is activating the CSS, but the text box in Service Studio is set to Enabled.
 
0
0
20 Jun 2016
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Is this still happening in the latest instalment of the platform?
0
0
20 Jun 2016
Copy Link
2015-04-07 15-19-51
Braxton
No matter what I change in the CSS, that "readonly="readonly"" is ALWAYS set, breaking the input.....
0
0
20 Jun 2016
Copy Link
2019-09-16 08-30-14
Claiton Faleiro

Hi all,


This is still happening in 11 version, both inputs, read only or not, get the same class.
Do you have any solution?

0
0
05 Mar 2020
Copy Link
2019-04-01 14-12-19
Antonio Gerard

Hi,

I'm facing the same problem on Service Studio 11 Traditional Web, I removed the Style Class "form" from 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

1
0
13 Apr 2020
Copy Link
2022-03-14 14-48-30
Victor Mora

i was able to put on a temporary solution, i guess, by adding this css line to the input

cursor: not-allowed;

it prevents users from clicking and changing the input values

0
0
11 Apr 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.