Semantic-ui-react: Modal: Keeps flickering and scrolling up and down

[da-moon]

I am experiencing an issue when I am using Modal Component with Meteor. For some reason,Modal would keep "flickering" and scrolling up and down when there are not too many items in the modal, at least a row has to be filled then it would stop flickering and work properly. It also works properly when the Modal size is set to full screen.

Steps

Here is the code :

import React, { Component } from 'react';
import { Card, Icon, Image , Item,Button, Divider, Header, Container, Modal} from 'semantic-ui-react'
export default class someComponent extends Component {
    constructor(props)
    {
      super(props);
      this.state= {
        items :[
          { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Falcome", description:this.renderComponents("description"),extra:this.renderComponents("button","id1")
          },
           { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Domino", description:this.renderComponents("description"),extra:this.renderComponents("button","id2")
          },
           { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Bengali tiger", description:this.renderComponents("description"),extra:this.renderComponents("button","id3")
          },
           { 
              image: {size:'tiny',src:"https://semantic-ui.com/images/wireframe/image.png"}, header: "Project Outback", description:this.renderComponents("description"),extra:this.renderComponents("button","id4")
          },
        ],
        open: false,
        dimmer:"blurring",
      };
       this.renderComponents = this.renderComponents.bind(this);
      this.showModal = this.showModal.bind(this);
      this.closeModal=this.closeModal.bind(this);
    }
    showModal(e,_id){
      e.preventDefault();
     this.setState({ open: true })
    }
    closeModal(){
     this.setState({ open: false })
    }

    renderComponents  (type,_id)
    {
      if( type === "description")
        return (<Image src='https://semantic-ui.com/images/wireframe/short-paragraph.png' />);
      if (type==="button")
          return (<div>
          <Divider/>
          <Button primary floated='left' onClick={(e)=>{this.showModal(e,_id)}}>
            Explore
            <Icon name='right chevron' />
          </Button></div>);
    }


    render()
    {
      return( <div>
          <Item.Group divided items = {this.state.items}/>
          <Modal size='large' dimmer={this.state.dimmer} open={this.state.open} oncloseModal={this.closeModal}>
                    <Modal.Header>Select a Photo</Modal.Header>
                      <Modal.Content image>
                        <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/kristy.png' />
                        <Modal.Description>
                          <Header>Default Profile Image</Header>
                          <p>We have found the following gravatar image associated with your e-mail address.</p>
                          <p>Is it okay to use this photo?</p>
                        </Modal.Description>
                      </Modal.Content>
                    </Modal>
          </div>
      );
    }
}

Expected Result

I was expecting to get something like this :
https://react.semantic-ui.com/modules/modal#modal-example-size

Actual Result

Here is how it actually looks
https://apperture-damoona.c9users.io/artist-dashboard

Version

0.68.3

[levithomason]

You cannot load Bootstrap CSS and Semantic UI CSS. CSS selectors are inherently global and there are name collisions between the two. Choose one or the other.

Duplicates:
https://github.com/Semantic-Org/Semantic-UI-React/issues/794
https://github.com/Semantic-Org/Semantic-UI-React/issues/1494

[sag1v]

@levithomason can you please respond to my comment? I'm curious to know what you think.