Hello All,

How to apply custom CSS to aura lightning overlay. I want to override the position of the popover and default size of the popover which is default provided by the slds. 

And also how to display the popover at the different position on different pages based on the page/ or click event. Click event can be inside the aura component or outside of the component?

Could anyone suggest how to proceed with this ?

Thanks in advance !

Regards,

Saurabh Pareek

Hello All,    

I wanted to create a overlay popover using lwc and not using aura lightning overlay component. How can i do this ?

Thanks in advance !

Hello All,

How to apply custom CSS to aura lightning overlay. I want to override the position of the popover and default size of the popover which is default provided by the slds. 

And also how to display the popover at the different position on different pages based on the page/ or click event. Click event can be inside the aura component or outside of the component?

Could anyone suggest how to proceed with this ?

Thanks in advance !

Regards,

Saurabh Pareek

Hello All,    

I wanted to create a overlay popover using lwc and not using aura lightning overlay component. How can i do this ?

Thanks in advance !

I am facing some problem in traversing lightning proxy dom. 

Requirement: To change the lightning icon (SVG use path) when lightning components render as in below lightning icon  Dom screen-shot:



Here, I am using lightning approval icon and it generates "approval" id when it renders in the browser by default.
So, I have to access this SVG part of Dom id="approval"  which I am unable to do so with below code.
Couple of below scenarios I used to get this:

1) Component.find()- I tried with the component.find("approval") but it gives undefined as it requires aura:id, which is not my case- as I have to find this dom component in the controller by this "approval" id only.
2) Jquery-I used Jquery to traverse dom but no luck.
3) component.getElements()- This gives proxy dom component(Locker Service) and values of this SVG are coming when I am debugging it as in the last screen-shot, but I am unable to traverse this Dom after.
   

Could you please help me with this and tell me an easy way to do that?

Component Code:
<aura:component >
    <ltng:require scripts="{!$Resource.jQuery + '/jquery.js'}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />:
    <div  id="test">
        <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
    </div>
</aura:component>

Controller :
({
 doInit : function(component, event, helper) {
var svg = component.find('approval');
        console.log('i am in doinit');
        console.log(svg);
        //var elements = document.getElementsByClassName("slds-icon-action-approval");
         //console.log(elements);
},
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(
     function()
     {
         //console.log(document.getElementById("sumit"));
     }
        );
         //console.log($( '#test'));

},
})
AfterRender:
({
    afterRender  : function(component,helper){
        component.superAfterRender();
     var svg=component.getElements();
        console.log('i am in afterrender');
        console.log(svg);
        //console.log(elements);
        
         
        }
    
})





Thanks in Advance!!