Semantic-Ui Modal Size Keeps Extending to the Height of a Page

semantic-ui modal size keeps extending to the height of a page

It turns out that Bootstrap package is conflicting with Semantic-UI package I use.

Simply by doing:

meteor remove twbs:bootstrap

Things got resolved. Granted, not an ideal solution, but I should not be using both frameworks at the same time anyways.

Well, after about two hours of debugging....

semantic-ui modal stretching window height

For anyone who runs into this in the future, the workaround that I ended up using was just to add this css rule:

body{ max-height: 100vh; }

Semantic UI Modal Height too long

In your JSfiddle I noticed your div inside of .modal-content has min-height: 1000px. I removed this and the modal is normal height now.

ReactJs: Wrap Semantic UI Modal using Portal pattern

You will lose correct vertical positioning and probably animations with approaches mentioned above.

Instead, you can just place your modal's component inside your app's root component and call .modal() with detachable: false. With this option, semantic wouldn't make any DOM manipulations and you won't lose your React DOM event listeners.

Example using Webpack/Babel:

import React, { Component } from 'react'import $ from 'jquery'
if (typeof window !== 'undefined') {  window.jQuery = $  require('semantic-ui/dist/semantic.js')}
class App extends Component {  state = {    showModal: false  }
  _toggleModal = (e) => {    e.preventDefault()    this.toggleModalState()  }
  toggleModalState = () => {      this.setState({ showModal: !this.state.showModal })    }
  render() {    return (      <div>        <a href="" onClick={this._toggleModal}></a>        {this.state.showModal          ? <Modal toggleModalState={this.toggleModalState}/>          : ''}      </div>    )   }}
class Modal extends Component {  componentDidMount() {       $(this.modal)      .modal({ detachable: false })      .modal('show')  }
  componentWillUnmount() {       $(this.modal).modal('hide')  }
  _close = (e) {    e.preventDefault()    alert("Clicked")    this.props.toggleModalState()  }
  render() {    return (      <div ref={(n) => this.modal = n} className="ui modal">        <div class="content">          <a onClick={this._close} href="">Click Me</a>        </div>      </div>    )  } }

Vertical viewport was given unbounded height

Adding this two lines

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...

---

Related Topics