semantic-ui 模态大小一直延伸到页面的高度

Question

我正在尝试实现一个基本模式，但它的大小一直扩展到页面的高度。

触发代码：

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

模态代码：

<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

原来我用的是Bootstrap package is conflicting with Semantic-UI包

只需要做：

meteor remove twbs:bootstrap

事情解决了。诚然，这不是一个理想的解决方案，但无论如何我都不应该同时使用这两个框架。

嗯，经过大约两个小时的调试....

Answer 2

我遇到了同样的问题。我的解决方案是以这种方式修改来自语义 UI 的模态组件的 CSS：

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

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

对我有用，希望对你有所帮助。我同意 Michael Khait 的观点，这个问题可能发生在 Boostrap 和 Semantic 之间的任何冲突 UI

Answer 3

是因为语义和bootstrap模态CSS规则相互冲突所以你可以做的就是简单地将以下 CSS 规则分配给你的主要 Div 或包装器 class

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

Answer 4

基于 op 的回答，如果您出于任何原因不想删除 Bootstrap，您可以使用此规则来解决问题，只需将自定义 class 添加到然后你的语义模态 unset 所有位置：

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

Answer 5

您还可以决定覆盖 css，即 modal class

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

这个非常适合我

semantic-ui 模态大小一直延伸到页面的高度

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

javascript

css

meteor

semantic-ui