I'm in the process of applying a modal using the Semantic UI React library. When the modal is triggered it starts flickering and I can't for the life of me figure out why. Any help is appreciated.
Prior to using Semantic I did install Bootstrap but that was removed when Semantic was introduced to this project. Others having the flickering issue resolved it by removing Bootstrap. But because I had previously removed it and the flickering continues, I'm at a loss. I did delete my package-lock.json and ran npm install but that unfortunately didn't fix this issue.
And before I forget, the flickering does happen on both Chrome and FF.
The following path shows how all the files ing into contact with the modal are laid out.
index.js
|_App.js
|_Router.js
|_EventPage.js
|_Jumbotron.js
|_QuizModalMike.js
- Note: this is a group project and not all the code was written by me.
QuizModalMike.js
The code for my "Multiple Modals" modal is a carbon copy of the example found here. Blinking happens even though no changes were applied.
import React, { Component } from 'react'
import { Button, Icon, Modal } from 'semantic-ui-react'
class NestedModal extends Component {
state = { open: false }
open = () => this.setState({ open: true })
close = () => this.setState({ open: false })
render() {
const { open } = this.state
return (
<Modal
dimmer={false}
open={open}
onOpen={this.open}
onClose={this.close}
size='small'
trigger={<Button primary icon>Proceed <Icon name='right chevron' /></Button>}
>
<Modal.Header>Modal #2</Modal.Header>
<Modal.Content>
<p>That's everything!</p>
</Modal.Content>
<Modal.Actions>
<Button icon='check' content='All Done' onClick={this.close} />
</Modal.Actions>
</Modal>
)
}
}
const ModalExampleMultiple = () => (
<Modal
// ------------- fix -------------
className="scrolling"
// -------------------------------
trigger={<Button>Multiple Modals</Button>}>
<Modal.Header>Modal #1</Modal.Header>
<Modal.Content image>
<div className='image'>
<Icon name='right arrow' />
</div>
<Modal.Description>
<p>We have more to share with you. Follow us along to modal 2</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<NestedModal />
</Modal.Actions>
</Modal>
)
export default ModalExampleMultiple
Jumbotron.js
import React, { Component } from 'react';
import {
Segment,
Container,
Header,
Button,
Icon,
Label,
Divider
} from 'semantic-ui-react';
import ModalExampleMultiple from './QuizModalMike';
class Jumbotron extends Component {
state = {};
render() {
return (
<div>
<Segment
inverted
textAlign="center"
style={{
minHeight: 700,
padding: '1em 0em',
display: 'flex',
flexDirection: 'column'
}}
vertical
>
<Segment
inverted
style={{
fontSize: '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '1em',
alignSelf: 'left'
}}
/>
<Container text>
<Header
as="h1"
content="Coffee Meets Code Event"
inverted
style={{
fontSize: '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: 0
}}
/>
<Header
as="h2"
content="Network with developers and technical recruiters from high quality panies."
inverted
style={{ fontSize: '1.7em', fontWeight: 'normal' }}
/>
{/* <QuizModal /> */}
<ModalExampleMultiple />
</Container>
</Segment>
</div>
);
}
}
export default Jumbotron;
EventPage.js
import React, { Component } from 'react';
import Jumbotron from './Jumbotron';
import Description from './Description';
import Participants from './Participants';
class EventPage extends Component {
state = {}
render(){
return (
<div>
<Jumbotron />
<Description />
<Participants />
</div>
);
}
}
export default EventPage;
Router.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Header from './mon/Header';
import Landing from './landing/Landing';
import EventPage from './event/EventPage';
class Router extends Component {
ponentDidMount() {
this.props.fetchUser();
}
render() {
return (
<div>
<BrowserRouter>
<div>
<Header />
<Route exact path="/" ponent={Landing} />
{/* Temporary link for development */}
<Route exact path="/event-page" ponent={EventPage} />
</div>
</BrowserRouter>
</div>
);
}
}
export default connect(null, actions)(Router);
App.js
import React, { Component } from 'react';
import Router from './Router';
class App extends Component {
render() {
return (
<div>
<Router />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './ponents/App';
import registerServiceWorker from './registerServiceWorker';
import 'semantic-ui-css/semantic.min.css';
import reducers from './reducers';
const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/*": {
"target": "http://localhost:1738"
},
"/api/*": {
"target": "http://localhost:1738"
}
},
"dependencies": {
"axios": "^0.17.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.77.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I'm in the process of applying a modal using the Semantic UI React library. When the modal is triggered it starts flickering and I can't for the life of me figure out why. Any help is appreciated.
Prior to using Semantic I did install Bootstrap but that was removed when Semantic was introduced to this project. Others having the flickering issue resolved it by removing Bootstrap. But because I had previously removed it and the flickering continues, I'm at a loss. I did delete my package-lock.json and ran npm install but that unfortunately didn't fix this issue.
And before I forget, the flickering does happen on both Chrome and FF.
The following path shows how all the files ing into contact with the modal are laid out.
index.js
|_App.js
|_Router.js
|_EventPage.js
|_Jumbotron.js
|_QuizModalMike.js
- Note: this is a group project and not all the code was written by me.
QuizModalMike.js
The code for my "Multiple Modals" modal is a carbon copy of the example found here. Blinking happens even though no changes were applied.
import React, { Component } from 'react'
import { Button, Icon, Modal } from 'semantic-ui-react'
class NestedModal extends Component {
state = { open: false }
open = () => this.setState({ open: true })
close = () => this.setState({ open: false })
render() {
const { open } = this.state
return (
<Modal
dimmer={false}
open={open}
onOpen={this.open}
onClose={this.close}
size='small'
trigger={<Button primary icon>Proceed <Icon name='right chevron' /></Button>}
>
<Modal.Header>Modal #2</Modal.Header>
<Modal.Content>
<p>That's everything!</p>
</Modal.Content>
<Modal.Actions>
<Button icon='check' content='All Done' onClick={this.close} />
</Modal.Actions>
</Modal>
)
}
}
const ModalExampleMultiple = () => (
<Modal
// ------------- fix -------------
className="scrolling"
// -------------------------------
trigger={<Button>Multiple Modals</Button>}>
<Modal.Header>Modal #1</Modal.Header>
<Modal.Content image>
<div className='image'>
<Icon name='right arrow' />
</div>
<Modal.Description>
<p>We have more to share with you. Follow us along to modal 2</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<NestedModal />
</Modal.Actions>
</Modal>
)
export default ModalExampleMultiple
Jumbotron.js
import React, { Component } from 'react';
import {
Segment,
Container,
Header,
Button,
Icon,
Label,
Divider
} from 'semantic-ui-react';
import ModalExampleMultiple from './QuizModalMike';
class Jumbotron extends Component {
state = {};
render() {
return (
<div>
<Segment
inverted
textAlign="center"
style={{
minHeight: 700,
padding: '1em 0em',
display: 'flex',
flexDirection: 'column'
}}
vertical
>
<Segment
inverted
style={{
fontSize: '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '1em',
alignSelf: 'left'
}}
/>
<Container text>
<Header
as="h1"
content="Coffee Meets Code Event"
inverted
style={{
fontSize: '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: 0
}}
/>
<Header
as="h2"
content="Network with developers and technical recruiters from high quality panies."
inverted
style={{ fontSize: '1.7em', fontWeight: 'normal' }}
/>
{/* <QuizModal /> */}
<ModalExampleMultiple />
</Container>
</Segment>
</div>
);
}
}
export default Jumbotron;
EventPage.js
import React, { Component } from 'react';
import Jumbotron from './Jumbotron';
import Description from './Description';
import Participants from './Participants';
class EventPage extends Component {
state = {}
render(){
return (
<div>
<Jumbotron />
<Description />
<Participants />
</div>
);
}
}
export default EventPage;
Router.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Header from './mon/Header';
import Landing from './landing/Landing';
import EventPage from './event/EventPage';
class Router extends Component {
ponentDidMount() {
this.props.fetchUser();
}
render() {
return (
<div>
<BrowserRouter>
<div>
<Header />
<Route exact path="/" ponent={Landing} />
{/* Temporary link for development */}
<Route exact path="/event-page" ponent={EventPage} />
</div>
</BrowserRouter>
</div>
);
}
}
export default connect(null, actions)(Router);
App.js
import React, { Component } from 'react';
import Router from './Router';
class App extends Component {
render() {
return (
<div>
<Router />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './ponents/App';
import registerServiceWorker from './registerServiceWorker';
import 'semantic-ui-css/semantic.min.css';
import reducers from './reducers';
const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/*": {
"target": "http://localhost:1738"
},
"/api/*": {
"target": "http://localhost:1738"
}
},
"dependencies": {
"axios": "^0.17.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.77.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
- 1 That's a lot of code for us to look at. Try to create an MCVE (in doing so, you might discover the cause). I'd also remend installing the React devtools extension for your browser and inspecting the state of the model and surrounding ponents to see why it's changing. – Sidney Commented Jan 25, 2018 at 21:28
- Thanks for the note. I was just trying to be thorough. Pardon the overkill. I will nevertheless install the devtools per your remendation and see where that takes me. – Mix Master Mike Commented Jan 25, 2018 at 21:30
- Overkill is definitely better than missing info. But I don't think very many people will be able or willing to read through this much code. The actual cause is likely a small portion of the code you've written, so determining where that is will probably point to a way to solve the issue. – Sidney Commented Jan 25, 2018 at 21:32
- I'll bet the farm you're 100% right it's something small. I think I just need to step back take a break and e back. Using the dev tool and triggering the modal, the flickering does not happen. Weird. Thanks for helping me out. – Mix Master Mike Commented Jan 25, 2018 at 21:36
- Spoke too soon. It stopped because my inspector window was at the bottom of the screen. Once I moved it to the right the flickering started right back up. I'll update this thread once I can find the needle in the haystack. – Mix Master Mike Commented Jan 25, 2018 at 21:45
2 Answers
Reset to default 4After further investigation it appears that this is an issue on Semantic's end. Luckily there's a PR for this exact issue. In the interim the solution I found was to add className="scrolling" to the variable ModalExampleMultiple within QuizModalMike.js. I edited the file above to reflect this. No more flickering.
I encountered similar issue, by setting className="scrolling" it will work, ut the position of the ModalBox will not be centered.
A better solution which worked for was to sett a fixed height in CSS!
<Modal style={{height: 300}} dimmer={this.state.dimmer} open={this.state.open} onClose={this.state.close}>
<Modal.Header>Link to this conclusion</Modal.Header>
<Modal.Content>
<Input focus placeholder='Search...' />
<Modal.Description>
<p>Visible to members in the team.</p>
</Modal.Description>
</Modal.Content>
</Modal>
);
}