Inline styles resize cells - Solution not working
Hi, I am trying to solve the issue of the resized cells when adding tags in the inline style cell property. I have followed all the steps of the solution in the support article (https://collaborate.pega.com/question/inline-styles-resize-cells-solution-not-working) but it does not work... the background-color does not change.
This is the code I add in the non-AutoGenerated section:
<style>
.myclass{
<pega:choose>
<pega:when test=".WeightingA == 'Low'">
background-color:#58D3F7;
</pega:when>
<pega:when test=".WeightingB == 'Medium'">
background-color:#58ACFA;
</pega:when>
<pega:when test=".WeightingC == 'High'">
background-color:#5882FA;
</pega:when>
<pega:when test=".WeightingD == 'Must'">
background-color:#5858FA;
</pega:when>
</pega:choose>
}
</style>
And I have added the section in the section that contains the repeating grid, etc... But no effect after running the section.
***Updated by moderator: Lochan to add Categories***
Accepted Solution
Merkle
ES
I finally got the solution by creating a new section which contained the property and the non-auro generated section, and then, add this section into each cell of the grid. The problem was that my style code is using the value of some properties in the grid, so the non-generated section containing the style class has to be within the cells so the code is generated for each value of each cell in the rows.
Thanks.
Merkle
ES
Sorry, the code is using the same property in all cases:
<style>
.myclass{
<pega:choose>
<pega:when test=".WeightingA == 'Low'">
background-color:#58D3F7;
</pega:when>
<pega:when test=".WeightingA == 'Medium'">
background-color:#58ACFA;
</pega:when>
<pega:when test=".WeightingA == 'High'">
background-color:#5882FA;
</pega:when>
<pega:when test=".WeightingA == 'Must'">
background-color:#5858FA;
</pega:when>
</pega:choose>
}
</style>
Pegasystems Inc.
IN
Hello
The best way to deal with it is using browser level debug technique ( Chrome debugger or F12 in IE etc. ) to see which class is overriding your style elements.
Just in case you need a quick fix then use of !important along with your background attribute can help.
Pegasystems Inc.
US
I'm not sure if you need these inline styles to be reflected on load or an event like focus/hover. But did you take a look at the UI gallery to see if you could leverage 'Set Style' in your scenario instead.
I have attached a couple of images.
Thanks.
Accepted Solution
Merkle
ES
I finally got the solution by creating a new section which contained the property and the non-auro generated section, and then, add this section into each cell of the grid. The problem was that my style code is using the value of some properties in the grid, so the non-generated section containing the style class has to be within the cells so the code is generated for each value of each cell in the rows.
Thanks.