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

Answer 3

It is because Semantic and bootstrap Modal CSS rules are conflicting with each other So what You can do is simply assign following CSS Rules to your main Div or wrapper class

top: auto;
bottom: auto;
right: auto;
left: auto;

Answer 4

Based on op answer, if you don't want to remove Bootstrap by any reason you can use this rule to fix the issue, just add a custom class to your semantic modal then unset all positions:

.Semantic-Modal {
    top: unset!important;
    right: unset!important;
    bottom: unset!important;
    left: unset!important;
}

Answer 5

You can also decide to override the css, that is the modal class

 .modal{ bottom: auto!important; left: auto!important; right: auto!important; top: auto!important; }

This one worked perfectly for me