It seemed like such a simple code fix. We wanted to modify an existing custom Aura component to handle the kind of complex related data that an out-of-the-box related list couldn't handle. But we wanted to show a LOT of fields, and they were bleeding beyond the boundary of the page.
Easy enough fix, we thought. Let's add the slds-scrollable_x class to the enclosing <div> tag.
Oooh, it looked so much better now (or so we initially thought)
After a quick victory dance, we started scrolling to the right to make sure our row-level actions still looked good. The row displayed fine when the menu button wasn't clicked.
But when we clicked that arrow, the display got all messed up. Not only did we lose all the information displayed in the row, we couldn't even see the full action menu (there are actually 3 actions that should be showing there).
Back to the drawing board.
We tried playing around with z-index settings. No luck. We tried adding custom CSS to describe overflow behavior. Still no luck.
Then we saw that the <lightning:buttonMenu> tag had a menuAlignment attribute we could set.
"Ah-ha!" we thought, this will be a quick fix. The menu is dropping down and off to the right. If we make it go UP, it will show up without having to expand the display area lower. So we tried using menuAlignment="bottom-right". It at least stopped the hiding of all the row data, but the menu was now getting cut off by the table heading.
After a bit more experimenting, we finally figured out that menuAlignment="auto" gave us the behavior we needed - it showed the menu above all other elements on the page.
Strangely enough, you would expect auto-alignment to be the default option. But if you specify no menuAlignment at all it's actually the equivalent of menuAlignment="left" which, as you can see above, doesn't really give us what we want.
Note: in our case we were trying to put in a quick fix to an old and complex Aura component, so our tags looked like this:
If we wanted to do the same thing in Lightning Web Components (LWC), the syntax would be:
So the next time you have a component that needs to scroll beyond its available area, and you have a pop-up menu that's getting cut off, remember the simple little fix - just add menuAlignment="auto" (for Aura) or menu-alignment="auto" (for LWC) to your button menu component.
CodeScience has helped build 10% of the apps on the AppExchange. Contact us today to learn how we can help your business thrive.