I'm trying to generate a popover but it seems the position is always right
.
I tried to make the position go left using nubbin class slds-nubbin_right-top
, but with this the nubbin arrowhead shows up in correct position, but whole popover dialog is still right of the button.
Here is my sample code. In this, I would like to have two buttons, positioned LEFT and RIGHT. And on Left button.
TestPopover.cmp
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<lightning:overlayLibrary aura:id="overlayLib"/>
<div class="slds-grid slds-card slds-p-around_small ">
<div class="slds-size_6-of-12">
<div class="slds-float_left">
<lightning:button class="mypopover1" name="popover" label="Show Popover (Right)" onclick="{!c.handleShowPopoverRight}"/>
</div>
</div>
<div class="slds-size_6-of-12">
<div class="slds-float_right">
<lightning:button class="mypopover2" name="popover" label="Show Popover (Left)" onclick="{!c.handleShowPopoverLeft}"/>
</div>
</div>
</div>
</aura:component>
TestPopoverController.js
({
handleShowPopoverRight : function(component, event, helper) {
component.find('overlayLib').showCustomPopover({
body: 'Test component content for popover',
referenceSelector: ".mypopover1",
cssClass: "popoverclass,slds-nubbin_left-top,slds-popover_panel,no-pointer,cTestPopover"
}).then(function (overlay) {
setTimeout(function(){
//close the popover after 1 seconds
overlay.close();
}, 3000);
});
},
handleShowPopoverLeft : function(component, event, helper) {
component.find('overlayLib').showCustomPopover({
body: 'Test component content for popover',
referenceSelector: ".mypopover2",
cssClass: "popoverclass,slds-nubbin_right-top,slds-popover_panel,no-pointer,cTestPopover"
}).then(function (overlay) {
setTimeout(function(){
//close the popover after 1 seconds
overlay.close();
}, 3000);
});
}
})
TestPopover.css
.THIS.no-pointer .pointer{
visibility: hidden;
}
.THIS.popoverclass {
min-height: 50px;
}
.THIS.popoverclass.slds-nubbin_left-top:before, .THIS.popoverclass.slds-nubbin_left-top:after, .THIS.popoverclass.slds-nubbin--left-top:before, .THIS.popoverclass.slds-nubbin--left-top:after,
.THIS.popoverclass.slds-nubbin_right-top:before, .THIS.popoverclass.slds-nubbin_right-top:after, .THIS.popoverclass.slds-nubbin--right-top:before, .THIS.popoverclass.slds-nubbin--right-top:after {
top: 1.5rem;
background-color: #fff;
}
Do anyone know if this is a platform issue in the base component or if there is a way around this, to make the popover work correctly for positioned nubbin?
I would like to make the popover show Right of first button, and show Left of second button.