没有水平滚动条的vue-multiselect下拉列表

时间:2018-03-26 20:14:49

标签: css vue.js vuejs2 multi-select

我在单选模式下使用vue-multiselect并尝试应用样式以使选项下拉列表与最宽选项的宽度相同。我实现了这一点,但无法获得.multiselect__option与父母相同的宽度.multiselect__element:

https://jsfiddle.net/xo9f7jby/30/

.multiselect {
    width: fit-content
}

.multiselect__content-wrapper, .multiselect__element {
    width: fit-content; 
}

.multiselect__option {
    width: 100%;
}

2 个答案:

答案 0 :(得分:1)

一个简单的解决方案是从fit-content移除.multiselect__element

.multiselect__content-wrapper /*, .multiselect__element */ {
  width: fit-content; 
}

更新了小提琴:https://jsfiddle.net/xo9f7jby/33/

答案 1 :(得分:0)

我只是在课堂上评论您看到的位置

.multiselect__content-wrapper {
  /*position:absolute;*/
  display: block;
  background: #fff;
  width: 100%;
  max-height: 240px;
  overflow: auto;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 50;
  -webkit-overflow-scrolling: touch
}