<Modal> appears in top left corner, half way out of the screen (>= v2.3.0)
hanshenrik opened this issue · 3 comments
In v2.3.0 and v2.3.1, <Modal> components does not appear horizontally and vertically centered, but instead in the top left, half way out of the screen.
Works in v2.2.14.
Used with semantic-ui-react v0.79.1.
Just encountered this when updating to v2.3.1
Looks like the authors intended to use flexbox positioning to center the modal in the .ui.page.modals.dimmer, have a look here:
https://github.com/Semantic-Org/Semantic-UI-LESS/blob/master/definitions/modules/dimmer.less#L100
But there is a transition class applied on showing the modal .transitions.visible with an !importantwhich clobbers the intended positioning:
Working around this with an override currently.
Confirming this is still an issue. We've downgraded to 2.2.14 due to this.
After upgrading to semantic-ui-react@v0.81.1 and semantic-ui-less@v2.3.1 this is no longer an issue. Guessing it was corrected in Semantic-Org/Semantic-UI-React#2690.
Since this issue was regarding usage together with semantic-ui-react, I'll close it.