Full screen modal


The modal component has a full screen mode, using something like this: “ui modal fullscreen hidden”.
But this only seem to impact the width of the modal, not the height.
Is there a way to specify that both the width and the height are maximised to fit the screen?



I think there isnt such possibility at the moment. I was looking for a similar answer a while ago and had to go with custom implementation.


seems easy enough, in your overrides for modal add a style for helight

.ui.fullscreen.modal {
    width: 95%!important;
    left: 2.5%!important;
    margin: 1em auto;
+   height: 100%;


Hmm. Funnyly enough it works. Usually setting height to 100% wont do it. Cool feat! Thanks @maxhodges!


I guess because of the z-index, it’s not really inside another container.

I just looked at the CSS to see how the width was determined and tried it for the height.

Enjoy Semantic-ui!


Cant always do that. But this is one of them good times ))