首页 文章

角度选择的多选择下拉

提问于
浏览 次
1

我在表单的底部有一个角度选择的多选元素，并希望将其设置为一个下拉框，而不是一个下拉框 . Angular-chosen似乎没有dropup选项 . select元素生成的html如下：

<select multiple chosen>
    <div class="chosen-container chosen-container-multi">
       <ul class="chosen-choices">
       ...
       </ul>
       <div class="chosen-drop">
       ...
       </div>
    </div>

这是我想要移动的.chosen-drop div .

如果我设置.chosen-drop元素的css顶部值以将元素移动到正确的位置，它的定位是完美的，但是在过滤列表时，找到很少或没有项目，下拉列表相对于顶部缩小下拉元素，在下拉列表（在父div之上）和父div的顶部之间留下间隙 .

如果我将.chosen-drop元素的css底部值设置为将其移动到父级上方，则过滤项目会使其向下缩小，从而消除下拉列表与父级div之间的差距，但只要选择了更多项目，父级div增加高度，改变下拉（dropup）框所需的位置 . 这是因为css底部值保持.chosen-drop div的底部相对于其父div的底部 .

有没有办法设置.chosen-drop div的底部值相对于其父div的顶部？

css dropdown angular-chosen

1 回答

  • 3

    通过使用css中的calc（）动态计算差值，只要父div可能会增大，就可以将 chosen-drop 的位置底部设置为公式：

    .chosen-drop { bottom: calc(100% - px); }

    100％表示要从中减去父div的高度，px是要在div的“底部”上方添加的填充量（以像素为单位） . 您可以使用calc进行简单计算，我认为这是一个添加到css3的漂亮功能 .

    在您的情况下，您希望您的 chosen-drop div位于其父级的顶部（这是div的完整高度）：

    .chosen-drop { bottom: calc(100%); }

    要不就

    .chosen-drop { bottom: 100%; }

    我应该提一下 calc() 是CSS3标准，并且可能与旧浏览器不兼容 . 您可以阅读更多令人兴奋的发展，例如 calc() here .

    回复于

相关问题