Avoiding post-processing is always nice, so here's an example that is resolved during render.
I would like to highlight the 'current' card in this classic report:
 |
| Cards Classic Report |
The SQL that dynamically defines these cards includes the following column, with some decider over which record is deemed the current selection.
,case when :P17_ITEM = 'SOMETHING' then 'is-active ' end AS card_modifiersThen we can include some CSS relevant to that card group, identified here by Static ID 'my_cards_r'.
#my_cards_r .t-Cards-item.is-active div.t-Card
{background-color : green;}
This solution should also reflect appropriately after any refresh of the card region.If you define a declarative List region, it also uses the
is-active class when the list entry is current, so this CSS could also apply.This is different to the
#CARD_COLOR# substitution string, that drives the colour of the circles where your icon/initials are. Here I used:
,'u-color-12' card_colorDo you have a preferred solution?
2 comments:
Generally speaking when solving a problem with CSS I avoid using IDs and instead make a class to associate with the intended target. In doing so, I am now free to add the class to any card report region and include the css styles to activate it.
With the following CSS: ".t-Cards--tyson-highlight-active .t-Cards-item.is-active .t-Card{ ... }"
I am free to add "t-Cards--tyson-highlight-active" to a card report to change its properties in some way.
That's a good point that I need to emphasise more, ensuring one-off demonstrations are also find to use everywhere else.
Post a Comment