Question
Capgemini
IN
Last activity: 3 Dec 2019 1:59 EST
Container Box Needed an Active Color
We have a requirement like, we have one repeating dynamic layout, results will come in a box format. We are using one Container, which needed one border on active, on focus and on focus-within also. In skin container header has some option like active, focus and hover but for the box Pega is not providing any active , hover or focus formatting. Why ?
To create those styling I used custom css in style sheet for the particular container class. Now on hover effect is working for the particular container, as I am hovering on the boxes border color is changing but I need on active effect also, like when I will click on any box, box border color need to stay. But its not happening, as Pega repeating dynamic layout does not work like Pega menu. Please suggest something ASAP.
Pegasystems Inc.
US
Hi Arpan,
Could you add some screen shots of what you have tried and what is still missing ? It'll help us understand the issue better, especially since this is to do with Styles.
Also mention the Pega version you are using.
BPM Company
NL
You must use pseudo class "focus-within", not "active".
I just created quick example:
Capgemini
IN
Vaspoz I have added all pseudo classes including active, focus, focus withing, but nothing is working. When I am inspecting the box and selecting the pseudo type as active or focus or hover or focus-within every time the 3px Green border is coming, but in real time on the browser if i am clicking the boxes the active border is not coming.
Please try to understand the issue properly, it is nothing related to CSS classes, the main problem is in memory or somewhere it should understand that this time that particular box is in active condition, (e.g : Our Pega Menu when You click It has 3 pseudo type Active, Hover and Focus). There will be some Java script or Jquery scripts for menu which runs to make any element as active.
PFA
BPM Company
NL
Your problem is that box (or div) could not be (from css perspective) active.
If you want to change container's style in runtime, your solution might be to create an action "change style" on some event.
Capgemini
IN
Ok I have attached the snapshot of the issue. When I am hovering on any repeating layout option Green color border is coming from the css styling which I added but when I am clicking the PDF is coming right side but If I remove the mouse pointer the green border is not staying, as It does not contain any active class defined.
PEGA Version : 8.2.2
Pegasystems Inc.
US
If the issue you are facing is that "click" on the container is not triggering the focus event, can you try if the following helps ? :
Add a click event to the "dynamic layout" that contains the all your child dynamic layouts
Use either Set style (OR) Run script to toggle the classes on the div
See attached screen shot.
Capgemini
IN
Any update on this ? I added one Java Script in :
$('.AttachmentDisplay1 div').click(function(e)
{
$('.AttachmentDisplay1 div').removeClass('highlighted');
$('.AttachmentDisplay1 div').addClass('highlighted');
});
This script is working as my expectation when I am adding it in a button inside the box. But if I add the same function in action set of the Dynamic Layout, it is not working. Can anyone explain me how to add an click event for a Dynamic Layout. Run Scripts or Any scripts anyone have ?