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

[cbxp]

I have a long list inside a popup and it is entirely OK for it to be outside the viewport in part. It does not make any sense to refuse to display a popup if the developer requests it to be shown.

I resolved the issue in my private fork by deleting the whole if() block in popup.js:

if( module.is.offstage(distanceFromBoundary, position) ) { ... }

There is another closed issue: https://github.com/Semantic-Org/Semantic-UI/issues/3004 on the same topic and multiple users seem to support the same approach.

[PhilLehmann]

Seems like the lastResort setting is what you are looking for. Though it may be preferrable If that would be initially set by default, no need to override anything.

[cbxp]

I tried lastResort but it didn't change anything. It seems to me that it tries other position but there is no way my popup would fit into the viewport - regardless of the position. I want it to be larger and the user will have to scroll down to see all of it.

[PhilLehmann]

That's exactly what it does for me.

Description is:

Setting this to a position like, right center forces the popup to use this position as a last resort even if it is partially offstage. Setting this to truewill use the last attempted position.

If it is not working for you, show us teh codez!

[kmd1970]

Popups now include a new setting boundary that let you specify that a popup should not escape the boundary of another section. Have you tried this? Providing a jsFiddle example would help.

[cbxp]

@philrykoff Thank you for pointing me back to lastResort. It turns out I had another problem which prevented the lastResort from working for me initially. Now everything works as expected. Thanks again and sorry for raising a false alarm.

[stevangoldduck]

you can do a dirty way here, which is set the max-height of the ui list class to 300px for example, and the overflow-y:scroll. So it will appear just like the image below