Question

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.

Comments

Keep up to date on this post and subscribe to comments

November 18, 2019 - 9:18am

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.

November 18, 2019 - 9:21am

You must use pseudo class "focus-within", not "active".

I just created quick example:

<style>

.class {

  background-color: yellow;

  height: 500px;

  width: 500px;

}

.class:focus-within {

  background-color: red;

}

</style>

<div class="class">

  <input></input>

</div>

November 18, 2019 - 1:14pm
Response to vaspoz

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

November 19, 2019 - 4:02am
Response to ArpanR5311

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.

November 18, 2019 - 1:14pm

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

November 19, 2019 - 9:14am

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.

 

December 3, 2019 - 1:59am

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 ?