Solved

Universal CSS question

  • 29 November 2022
  • 8 replies
  • 133 views
rbiram
Rank
Userlevel 4
Badge +2

Hi,

 

In our application we have some expression fields in a form which has auto-edit enabled. When auto-edit is enabled the text in this field gets greyed out like this:

We want this text to be black eventhough auto-edit is enabled. I've tried doing this with a conditional layout specifically set for this field, but even then the color gets overwritten somehow. So the next step is doing this by changing the css values.

I've checked which element and  css class I need to edit the color, which are the following:

I've changed the alpha channel from 0.38 to 1 and the text color changes to black:

So I took the css class and made the change in my custom.css file. Restarted my application. But nothing's changed.
 

Anyone know what I'm missing? Thanks!

icon

Best answer by Tim de Lang 29 November 2022, 15:00

View original
This topic has been closed for comments

8 replies

Tim de Lang
Rank
Userlevel 2
Badge +3

Hey there,

the .css- classes (e.g. .css-bdbexz in your example) are generated. You cannot use these in your custom css since they'll change in a next build of Universal.

The reason that the text field is grayed out, is probably because it is a expression field that is not editable. This makes it disabled in universal.

You could probably say something like 

.edit-mode textarea.disabled {
  color: black !important;
  height: 100% !important;
}

 

Be mindful that your can put the GUI in dark mode, and then the color: black; wouldn't look as good. We have .dark and .light classes to help with that, something like 

.light .edit-mode textarea.disabled {
  color: black !important;
  height: 100% !important;
}

and for dark mode you could do:

.dark .edit-mode textarea.disabled {
  color: white !important;
  height: 100% !important;
}

Kind regards,

Tim de Lang

rbiram
Rank
Userlevel 4
Badge +2

Hi,

Thanks for the quick response.

Good to know about the generated classes, I'll make sure to avoid those in the future. I've tried your given solution but sadly it doesn't seem to do anything to the text. I've tried changing some things, but to no avail. I've restarted my application several times as well to be sure. 

Any ideas?

Tim de Lang
Rank
Userlevel 2
Badge +3

Hi there,

that's unexpected. Can you verify a few things for me:

Kind regards,

Tim de Lang

 

rbiram
Rank
Userlevel 4
Badge +2

Hi,

There were some errors in the custom.css file pertaining to the use of !important and that the use of the textarea element before the .disabled class is overqualified. I've got rid of those to be sure and the errors are gone. There's another style change in the file that works. 

This is the css that's applied to the color property:

 

For both the .non-edit and the .edit mode it still uses the rgba style instead of the solid black property.

 

This is my custom.css file:

 

Tim de Lang
Rank
Userlevel 2
Badge +3

Hi there,

I'd advise you to put the  textarea and !important bits back, now your rule has less specifity than Universal's own styling, so it will never be applied. These are not errors per se, but they make it a bit difficult to overwrite the rule. But since we're overwriting other rules, that's exactly what we want to do.

Oddly enough, I also do not see that rule in your computed tab. It should be there, even if it's overwritten. I've validated the following rule on my end, and it works for edit mode:

.edit-mode textarea.disabled {
    color: red !important;
}

can you go to https://[your universal address]/custom.css ? It should load the css file. Can you see your rule there?

Kind regards,

Tim de Lang

rbiram
Rank
Userlevel 4
Badge +2

Hi there,

I've changed the css back to have the !important property. I can see my rule when I visit /custom.css:

 

I also see it in the computed tab now as well:

 

But for some reason still no change in my application:

Is it somehow because it's an expression field?

 

Thanks in advance.

 

Tim de Lang
Rank
Userlevel 2
Badge +3

Hi there,

That's progress, unfortunately the changes with !important and textarea aren’t applied yet (You see it's .disabled rather than textarea.disabled. in the computed tab) So the styles from custom.css are there, but they're outdated, and the problems I was talking about with specificity are coming up.

Can you try to open in in incognito mode? I think maybe some caching may be going on.

Kind regards,

Tim de Lang

rbiram
Rank
Userlevel 4
Badge +2

Seemed to be a caching problem. It works! Well except for the non-editable HTML-field, but I'll figure that one out.

Thanks for the help!

Terms & ConditionsCookie settings