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

问题

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>

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

回答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

回答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;

回答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;
}

来源：https://stackoverflow.com/questions/30341654/semantic-ui-modal-size-keeps-extending-to-the-height-of-a-page

标签

javascript

css

css3

meteor

semantic-ui