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

Question

I'm trying to implement a basic modal, but its size is kept being extended to height of a page.

Trigger code:

$('.ui.modal.apply-modal').modal('show');

Modal Code:

<div class="ui modal apply-modal">
<i class="close icon"></i>
<div class="header">
  Modal Title
</div>
<div class="content">
  facebook
</div>
<div class="actions">
  <div class="ui button">Cancel</div>
  <div class="ui button">OK</div>
</div>

Answer 1

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....

Answer 2

I had the same issue. My solution was modify the CSS of the modal component from Semantic UI in this way:

 .modal { position: relative;} or #myModal { position: relative;}

<div id="myModal" class="ui small modal"></div>

It works for me, I hope to help you. I agree with Michael Khait, this issue maybe occurs for any conflict between Boostrap and Semantic UI