How to apply custom styles to a read-only date field?
I have a requirement where I need to custom style date field (Read-only), I'm unable to find where I can apply custom styling.
In below image, i want to make "23 june,2023" --> "23 june,2023" How can i change font-weight and color of ready-only date?
Accepted Solution
Updated: 10 Jul 2023 0:13 EDT
Ordina
NL
@pacchi To follow up:
- If you have a custom skin or a specialization of an existing skin in your own ruleset, make the change to the control format there or create a new control format and apply it
- If not, check if there is a suitable helper class and if it's doable to work with this for every current and future reference
- If not, you can still make changes to one of the style sheets part of the skin or inherited skin. You can find the style sheets used during runtime in the skin rule:
Instead of using the most global selector .dataLabelForRead, you'll need nested selectors (you can use dev tools to identify which selectors are used for a certain element and play with that). There are some obvious drawback to this, mostly maintainability and level of expertise needed
Updated: 6 Jul 2023 18:25 EDT
Ordina
NL
@pacchiDo use existing control and / or label formats over any helper classes or css overrides. You can also make changes in the skin or extend style sheets from the skin. The .dataLabelForRead selector comes to mind if you want to style specific read-only elements (which will need the right amount of specificity to avoid worse ripple effects).
Updated: 9 Jul 2023 8:21 EDT
Virtusa Corporation
IN
Hi @BasRulesMatter! ,
- No control format is available for custom display for the date.
- If I use the Label format the output will be like the below image
Date format when we use display type as label
3. Global selector .dataLabelForRead will affect the entire application, how to point extend style sheets to the specific field type?
Thanks,
Prashanth
Accepted Solution
Updated: 10 Jul 2023 0:13 EDT
Ordina
NL
@pacchi To follow up:
- If you have a custom skin or a specialization of an existing skin in your own ruleset, make the change to the control format there or create a new control format and apply it
- If not, check if there is a suitable helper class and if it's doable to work with this for every current and future reference
- If not, you can still make changes to one of the style sheets part of the skin or inherited skin. You can find the style sheets used during runtime in the skin rule:
Instead of using the most global selector .dataLabelForRead, you'll need nested selectors (you can use dev tools to identify which selectors are used for a certain element and play with that). There are some obvious drawback to this, mostly maintainability and level of expertise needed
Virtusa Corporation
IN
@BasRulesMatter! Great, thanks mate it worked!!