隐藏在溢出中的掌声下拉菜单：自动div

Question

我尝试使用0.17.0手中的下拉菜单。该表很大，所以我在宽度和高度限制div中使用overflow：auto以使其获得滚动条。但是，下拉列表不起作用，因为下拉弹出窗口不会溢出div而您无法滚动div以查看下拉列表，因为在下拉列表外单击会关闭它。如何在滚动HOT中使用下拉单元格？

我从HOT文档中获取了下拉示例并将其包装在一个有限大小的div中：

HTML

<div style="height: 90px; width: 200px; overflow: auto">
  <div id="example1" class="hot handsontable htColumnHeaders"></div>
</div>

JS

var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: [
      ["Nissan", 2012, "black"],
      ["Nissan", 2012, "black"],
      ["Nissan", 2012, "black"],
    ],
    colHeaders: ['Car', 'Year', 'Chassis color'],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
    ]
  });

http://jsfiddle.net/h6cb3djx/

Answer 1

摆弄浏览器，我能够显示完整的下拉菜单。

<div>有2个类＆＃34;掌握htColumnHeaders＆＃34;。您只需将以下CSS添加到您的页面，然后显示下拉列表：

/* Pulldown can break out of handsontable boundary */
.htColumnHeaders {
    overflow: visible !important;
}

这会覆盖直接的HTML属性样式=＆＃34; ....;溢出：隐藏＆＃34;。 提示：不要限制溢出-y，因为这不会覆盖溢出（没有＆＃34; -y＆＃34;）。