Skip to main content
Solved

Universal CSS question

  • November 29, 2022
  • 8 replies
  • 223 views

rbiram
Hero
Forum|alt.badge.img+4

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!

Best answer by Tim de Lang

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

View original
Did this topic help you find an answer to your question?
This topic has been closed for comments

8 replies

Tim de Lang
Moderator
Forum|alt.badge.img+4
  • Moderator
  • 90 replies
  • Answer
  • November 29, 2022

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
Hero
Forum|alt.badge.img+4
  • Author
  • Hero
  • 75 replies
  • November 30, 2022

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
Moderator
Forum|alt.badge.img+4
  • Moderator
  • 90 replies
  • November 30, 2022

Hi there,

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

Kind regards,

Tim de Lang

 


rbiram
Hero
Forum|alt.badge.img+4
  • Author
  • Hero
  • 75 replies
  • November 30, 2022

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
Moderator
Forum|alt.badge.img+4
  • Moderator
  • 90 replies
  • December 1, 2022

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
Hero
Forum|alt.badge.img+4
  • Author
  • Hero
  • 75 replies
  • December 1, 2022

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
Moderator
Forum|alt.badge.img+4
  • Moderator
  • 90 replies
  • December 1, 2022

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
Hero
Forum|alt.badge.img+4
  • Author
  • Hero
  • 75 replies
  • December 1, 2022

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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings