There are multiple cards on my screen, on the click of one of them other cards loads. So when i click on one of the cards , the focus changes and the css changes on them are lost. So my question is how the CSS holds despite focus going to other cards. using this code now .cardVendor{ background-color: #FFFFFF; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2); margin: 5%; padding: 5%; } .cardVendor:focus{ background-color: #E1FCFF; border: 2px solid #333333; }
asked
Arijeet Pal
1 answers
0
A possible solution could be dynamic classes, where you could use a boolean or variable in your domain model to apply the classes. I would suggest putting the :focus class in a new class (e.g. .cardVendor-focus) and applying it like this in your dynamic class:
// if $VariableName/Focus = true then ‘cardVendor-focus’ else ‘cardVendor’ //
This is one of many solutions, another option might be implementing a javascript snippet.