0

I used slds-popup in a table. And those popup contains multiselect picklist values options with break(<br/>). My problem is when popup values are more, then its going to the second column. Something is wrong with the position i believe. enter image description here

when it has two options selected, then enter image description here

As you can see when there are two options then pointer shifted down a little bit. Similarly when there are five or more options then its going to second column.

I hope i am clear with my issue here. I am not good in CSS. I tried changing position for those div. But its not working.

<div id="red" style="float: left;width: 15px;height: 15px;margin: 2px;border: 1px solid rgba(0, 0, 0, .2);background:red;" onmouseover="{!c.redBlockOver}" onmouseout="{!c.redBlockOut}">
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-top-to-bottom" role="tooltip" id="help" style="position: absolute; top: -35px; left: -5px;display:none;">
        <div class="slds-popover__body">
            <aura:unescapedHtml value="{!accWrp.redBlockStr}"/>
        </div>
    </div>
</div>

onmouseOver and onMouseOut i am hiding and showing second div. I am iterating over an account wrapper and "redBlockStr" is a string. It has optns with </br/> at the end.

I am not sure which properties i need to use, to solve this.

Any help will be appreciated.

1

The problem is your first DIV line needs to have "position:relative" and then keep your "position:absolute" in the second line like you have it. This will ensure that wherever the position needs to be, the background content will be static.

I had the same problem and fixed it like that.

  • Hi @Tony, thanks for your help. I couldn't find solution that time. So i have used pop over for the bottom. So the tool tip text was started coming at the bottom. So it worked for me at that time, Thank you your reply :) – Manohar Oct 8 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.