Question

我们使用的是Bootstrap v3.3.6，并使用了Multiselect盒子。我们为我们的站点使用IBM Portal Portlet，我们遇到了有多个选项的多选的问题。

如果用户的最后一个多选（我们经常在页面上有几个）有5个或更多项可供选择（提供数据库），则根据底部的空间量，不会显示过去4的任何内容。 Portlet的。那里有按钮，允许一些空间。

我可以在按钮之前添加几个换行符以允许第五个项目显示 - 这不是理想的，但它现在是一个绑定 - 但我更担心未来的用户可能超过五个选项。

此时的z-index为1000，页面上的其他内容都小于该值。似乎它的portlet本身限制了显示。

该网站是由css驱动的，所以我尝试了溢出：可见，溢出-y：可见，并将这些添加到网站上的封闭div，部分等。甚至溢出y：滚动也不会起作用，因为你无法看到下拉列表的底部以查看向下滚动。

我只是想知道是否有人有这方面的经验（尤其是使用websphere门户网站）并且有任何建议。

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 160px;
  margin: 2px 0 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 1px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}

这是实际的多选表格单元格（抱歉，我不得不混淆实际选项 - 它是一种隐私类型的东西）：

          <script type="text/javascript">var eServices184141 = [];</script>
          <select id="184141-SERVICES" multiple="multiple" onchange="serviceSelected(eServices184141, 184141, this);accountUpdated('184141');" style="display: none;">
             <script type="text/javascript">eServices184141.push('BILLDETAILS');</script>
            <option id="OPT1184141" value="OPT1" selected="">OPT1</option>
            <option id="OPT2184141" value="OPT2">OPT2</option>
            <script type="text/javascript">opt184141.push('opt');</script>
            <option id="OPT3184141" value="OPT3" selected="">OPT3</option>
             <script type="text/javascript">opt184141.push('opt');</script>
             <option id="OPT4184141" value="OPT4" selected="">OPT4</option>
             <script type="text/javascript">opt184141.push('opt');</script>
             <option id="OPT5184141" value="OPT5" selected="">OPT5</option>

      </select><div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="options" aria-expanded="false"><span class="multiselect-selected-text">4 selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="active"><a tabindex="0"><input type="checkbox" id="idOPT1184141" value="OPT1"><label class="checkbox" for="idOPT1184141"></label>OPT1</a></li><li><a tabindex="0"><input type="checkbox" id="idOPT2184141" value="OPT2"><label class="checkbox" for="idOPT2184141"></label> OPT2</a></li><li class="active"><a tabindex="0"><input type="checkbox" id="idOPT3184141" value="OPT3"><label class="checkbox" for="idOPT3184141"></label> OPT3</a></li><li class="active"><a tabindex="0"><input type="checkbox" id="idOPT4184141" value="OPT4"><label class="checkbox" for="idOPT4184141"></label> OPT4</a></li><li class="active"><a tabindex="0"><input type="checkbox" id="idOPT5184141" value="OPT5"><label class="checkbox" for="idOPT5184141"></label> OPT5</a></li></ul></div>

        <script type="text/javascript">
           $(document).ready(function() {
              $("#184141-SERVICES").multiselect({
                 numberDisplayed: 1
              });
           });
        </script>

Boostrap在Portlet上多重选择Z-index问题

0 个答案: