CODEWITHSUNDEEP
htmlcssoverflowsemantic-ui
megamaiku
megamaiku

Reputation: 434

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

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:

enter image description here

Upvotes: 3

Views: 2963

Answers (3)

Eduardo Paz
Eduardo Paz

Reputation: 164

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

Upvotes: 2

Murat Aykanat
Murat Aykanat

Reputation: 1708

I had a similar issue where I had a very long text in a span on a Semantic UI card which I needed to hide the overflow, but at the same I needed to show a popup of the whole text when user hovers over the shown portion of the text. I resolved the issue like this:

<div class="content">
    <div class="description" style="position: absolute; width: 172px; height: 19px;">
        <span style="display: block; width: 100%; height: 100%;" data-tooltip="A very very very very very very very long text" data-position="bottom left"></span>
    </div>
    <div class="description" style="text-overflow: ellipsis; overflow-x: hidden;">
        <span style="white-space: nowrap;">A very very very very very very very long text</span>
    </div>
</div>

The first div basically creates an invisible overlay on top of the second div so it displays the popup when user hovers over it. Also since height and width of the cards were fixed, I had no issues with hard-coding the height and the width of the overlay-ed element in this scenario.

Upvotes: 0

NSTuttle
NSTuttle

Reputation: 3335

This is an issue when overflow is set on the parent div while using relative or absolute positioned elements within.

Basically, there is no way around this without forcing certain elements (Calander Pop-ups, Select inputs, etc.) to be position 'Fixed' on open.

The good news: Certain libraries have accounted for this and have built in attributes/functions and the like to correct. Bootstrap for example has this to add: data-container="body" which tells the element where to append to the DOM.

If you are not using a library with a fix:

A simple switch is not that easy here. You will need to implement a function that calcs the position of your Date input's bottom and appends the appropriate CSS left/top properties to that location. This is because 'fixed' fixes the element to one location on the page, regardless of parental rules.

Furthermore, you must account for scroll events as well. (What if the user scrolls while the calendar is open?)

UPDATE:

According to Semantic Documentation you are using:

$('.longer.modal')
  .modal('show')
;

This forces the modal content to scroll, thus having an overflow-y: scroll set on the parent div.

Try using the following:

$('.long.modal')
  .modal('show')
;

This page scrolls to cover all of the modal content, hopefully preventing the cut-off. If verified, we know the overflow is the issue.

Upvotes: 0

Related Questions