2

Is there a way to prevent that the below lightning-button-menu is hidden by the wrapping div which has an overflow : hidden?

enter image description here

buttonMenu.html

<template>
    <div class="slds-p-around_medium overflow-div">
        <lightning-button-menu alternative-text="Show menu">
            <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
            <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
            <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
            <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
        </lightning-button-menu>
    </div>
</template>

buttonMenu.css

.overflow-div {
    overflow: hidden;
    background-color: grey;
}
Improve this question
4
  • Maybe that helps stackoverflow.com/questions/57223376/…
    – Robert Sösemann
    Commented Nov 12, 2020 at 22:21
  • ...or that one stackoverflow.com/questions/52684091/…
    – Robert Sösemann
    Commented Nov 12, 2020 at 22:22
  • Is there a reason you are adding an overflow: hidden to the parent div? If it's not possible to remove overflow hidden from parent div, maybe try adding position: absolute to lightning-button-menu(you may need to adjust the position in that case
    – Anmol Kumar
    Commented Nov 13, 2020 at 14:08
  • The reason to add an overflow is I have a container with several divs that can grow dinamically. I want to see an x-scrollball in that container if the screen width is not enough to allocate all the divs inside. The menus are inside of this divs.
    – Mario González Duarte
    Commented Nov 16, 2020 at 9:35

1 Answer 1

Reset to default
0

At the end, I found a solution: I had to extend the lightning-button-menu component class to add this extra functionality.

Thank you everyone

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .