Question

如何在此下拉菜单中允许固定高度？（专栏车）

我一直在不懈地努力解决身高问题。我想要一个固定的高度下拉菜单，最大300px。我在可动手操作的站点中使用了AutoRowSize高度功能和其他高度功能，但似乎没有任何作用。

我的想法已经用完了。有什么建议或替代方法可以尝试吗？

我正在使用 Handsontable中的Handsontable 功能（Found Here）。

    columns: [
  {
    type: 'handsontable',
    handsontable: {
      colHeaders: ['Marque', 'Country', 'Parent company'],
      autoColumnSize: true,
      data: manufacturerData,
      getValue: function() {
        var selection = this.getSelectedLast();

        // Get always manufacture name of clicked row
        return this.getSourceDataAtRow(selection[0]).name;
      },
    }
  },
  {type: 'numeric'}

]

Answer 1

.handsontableEditor .ht_master {
    height: 300px;
    overflow-y: auto !important;
    width: calc(100% + 2px);
}
.handsontableEditor .ht_clone_top {
    transform: none !important;
}

...似乎可以完成工作。 Updated fiddle。

我不得不使用!important来覆盖HoT即时放置在元素上的内联样式。为了限制这种情况影响其他实例的机会，请为选择器添加该实例的特定标识符。

Answer 2

您尝试过jExcel吗？下拉菜单具有响应性，并会自动为下部屏幕带来一个选择器。

https://bossanova.uk/jexcel/examples/working-with-dropdowns

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jdropdown.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jdropdown.min.css" type="text/css" />

<div id="my"></div>

<script>
data1 = [
    ['US', 'Cheese', 'Yes', '2019-02-12'],
    ['CA;US;UK', 'Apples', 'Yes', '2019-03-01'],
    ['CA;BR', 'Carrots', 'No', '2018-11-10'],
    ['BR', 'Oranges', 'Yes', '2019-01-12'],
];

$('#my1').jexcel({
    data:data1,
    colHeaders: [ 'Product Origin','Description', 'Stock', 'Best before' ],
    colWidths: [ 300, 200, 100, 100 ],
    columns: [
        { type: 'dropdown', url:'/jexcel/countries', autocomplete:true, multiple:true }, // Remote source for your dropdown
        { type: 'text' },
        { type: 'dropdown', source:['No','Yes'] },
        { type: 'calendar' },
    ]
});
</script>
</html>

可调节下拉高度调整中的可调节

2 个答案: