弹出窗口没有获得完整的导航栏大小

Question

我遇到了一个问题，

弹出元素 LINES 的大小为 <div class="right menu"> 而不是 <div class="ui top attached menu">。因此，我的弹出窗口与右侧菜单的大小相同，我需要弹出窗口与整个导航栏的大小相同

这是fiddle：http://jsfiddle.net/qawdfw0y/1/

提前致谢

Answer 1

您的弹出元素位于 .right class 元素内，因此它肯定会占用它的宽度。

你可以试试

.right{ width: 100%;}

以及在您的弹出块中。

<div class="ui fluid popup bottom left transition hidden" 
style="top: 554px; left: 1px; bottom: auto; right: auto; width: 100%;">

Answer 2

我不知道这是否正是您想要的...但我觉得它很不错：

.ui.popup {
  min-width: 98vw;
  left: 1vw !important;
}

/* To move the arrow on the box */
.ui.bottom.center.popup:before {
  right: 320px;
  left: auto;
}

我知道 !important 的使用通常不是最好的，但是 style 是由 semantic.js 设置的。唯一的选择是操纵 semantic.js 以使其执行您想要的操作。

弹出窗口没有获得完整的导航栏大小

Popup not getting the full navbar size

css

navbar

semantic-ui