javascript - 多选选项隐藏在它下面的 div 后面

Question

我在表格单元格中使用多选下拉列表。但是当我单击它时，选项隐藏在其下方单元格的内容后面。

我究竟做错了什么？

$('#example-getting-started').multiselect({
  buttonWidth: '700px',
  maxHeight: 200,
  buttonText: function(options, select) {
    var labels = [];
    options.each(function() {
      if ($(this).attr('label') !== undefined) {
        labels.push($(this).attr('label'));
      } else {
        labels.push($(this).html());
      }
    });
    return labels.join(', ') + '';
  }
});

<div id="attachedInfoOpts">
  <select id="example-getting-started" multiple="multiple">
    <option value="Breating Exercises" selected="selected">Breating Exercises</option>
    <option value="Prescription">Prescription</option>
    <option value="Health Dieting Information" selected="selected">Healthy Dieting Information</option>
    <option value="Health Dieting Information" selected="selected">Healthy Dieting Information</option>
  </select>
</div>

Answer 1

添加

Overflow: visible;

到周围的Container。

Answer 2

尝试将 appendTo="body" 作为属性添加到您的 p-multiSelect。

结果应如下所示：

<p-multiSelect appendTo="body" *ngSwitchCase="'color'" [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value, col.field, 'in')"></p-multiSelect>

我遇到了这个问题，添加这个属性为我解决了这个问题。