Semantic-ui: [POPUP] Popup does not fit within the boundaries of the viewport

[qimus]

if you do not have enough space for the popup appears this error, such as open console.

[jlukic]

That's correct behavior. You can specify a lastResort position in settings object if you need it to appear always even if it cannot fit.

[matikucharski]

I think default error throwing when popup cannot fit is not correct from UX point of view.

[avalanche1]

@matikucharski +1

[subhog]

@matikucharski +1

That's definitely not what users expect.

[Almaju]

Hello, I found a dirty workaround to make it shows and resizes accordingly of the window:

• Add this to your CSS .ui.popup{overflow:auto;}
• Add this to your JS:

var resizePopup = function(){$('.ui.popup').css('max-height', $(window).height());};

$(window).resize(function(e){
    resizePopup();
});

• Initialize your popup:

$('.button')
    .popup({
        on: 'click',
        lastResort: 'bottom right',
        onShow: function(){
            resizePopup();
        },
    })
;

Cheers :)

[jordmax12]

@matikucharski +1 @Almaju +1

[mrkam]

max-height can be set to 100vh instead.

[claudiospro]

use element children and set scroll and max-height into popup:
overflow-y: scroll; max-height: 400px;