Here is the problem I am having when using the semantic UI React modal: I do as shown on their website, but weirdly my Modal moves around like in this GIF of what is happening.
I have no idea how to fix this. Here is my code:
class Success extends React.Component {
constructor () {
super();
this.closeModal = this.closeModal.bind(this)
this.state = {
Modalopen: true,
Orders: "",
urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
}
}
closeModal () {
this.setState({Modalopen: false})
this.props.history.pushState(null, "/")
}
render () {
return (
<Modal open={this.state.Modalopen}>
<Modal.Header>Success!</Modal.Header>
<Modal.Content image>
<Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
<Modal.Description>
<Header>Thank you</Header>
<p>bla bla bla</p>
<Button color='green' onClick={this.closeModal} inverted>
<Icon name='checkmark' /> Got it
</Button>
</Modal.Description>
</Modal.Content>
</Modal>
);
}
}
What might be causing this issue? Thank you.
I had the same problem today when trying to create a custom 'fullscreen' modal.
This is the line causing us trouble...
https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Modal/Modal.js#L255
If the modal height is greater than or equal to window.innerHeight, it adds the class scrolling which comes with a bunch of styles.
setPositionAndClassNames then appears to be called recursively on line 271, which is probably causing the weird looping behaviour.
I'm adding margin-bottom: 1px to my modal to make sure it's a tiny bit less than window.innerHeight.
I'll open a PR into semantic-ui-react and see what they say...
I have a PR open at https://github.com/Semantic-Org/Semantic-UI-React/pull/3024 with a suggested fix.
That's merged and now part of Semantic UI React.
In my case, it create Modal normally.
Here is the test code(ES5/webpack) :
[index.html]
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</head>
<body>
<div id="wrap"></div>
<script src="dist/app.js"></script>
</body>
</html>
[app.jsx]
var React = require('react');
var ReactDOM = require('react-dom');
var Semantic = require('semantic-ui-react');
var Button = Semantic.Button;
var Header = Semantic.Modal.Header;
var Image = Semantic.Image;
var Modal = Semantic.Modal;
var Icon = Semantic.Icon;
var IndexPage = React.createClass({
getInitialState : function() {
return {
Modalopen: true,
Orders: "",
//urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
}
},
closeModal: function() {
this.setState({Modalopen: false})
//this.props.history.pushState(null, "/")
},
render : function () {
return (
<Modal open={this.state.Modalopen}>
<Modal.Header>Success!</Modal.Header>
<Modal.Content image>
<Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
<Modal.Description>
<Header>Thank you</Header>
<p>bla bla bla</p>
<Button color='green' inverted>
<Icon name='checkmark' /> Got it
</Button>
</Modal.Description>
</Modal.Content>
</Modal>
);
}
});
ReactDOM.render(<IndexPage/>, document.getElementById('wrap'));
Image of Result by the upper code
If you get the error continually, Please add the html/js files more detail with Codepen to test like your situation.
