How to make popup element that overflows into modal element not appear cut off (semantic ui)

Question

I'm working on a calendar picker, using Semantic UI. I'm using their modal module, but only half the popup is visible, and the rest overflows into the modal div itself. I want it to show up above the content. I know this is possible with javascript, but I'd like to avoid that.

Any ideas? I've tried adjusting the z-index, but doesn't work because it's embedded into the modal. Thanks so much. Please see below:

Answer 1

I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings set this attibute to false -> movePopup: false

$('#button_event_trigger').popup({
                popup: $('.custom.popup'),
                movePopup: false, //this here
                on: 'click'
            });

In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working. With this atributte movePopup: false now popup semantic-ui is over the top from other elements;

follow my anwser here: https://stackoverflow.com/a/62688669/4530242