Full screen modal


#1

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?


#2

Hi,

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.


#3

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%;
}

#4

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


#5

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!


#6

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