Question

如何使此多选列表可调整大小？我想设置列表的默认高度和宽度以及最小高度和宽度，但是我可以自己调整它的大小。

我试过这个没有成功：

<div id="resizable" class="ui-widget-content">
   <h3 class="ui-widget-header">Stored Procedures</h3>
<div class='list'> 

<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1, selectedOptions:selectedStoredProceduresInDb1"> </select>

<div>
    <button data-bind="click: copyToDb2, enable: selectedStoredProceduresInDb1().length > 0">Copy to DB2</button>
</div>
</div>
</div>


$(function() {
    $( "#resizable" ).resizable();
});

JSFiddle

Answer 1

在你的jsFiddle中，我没有看到$('#resizable').resizable();，你没有ID为resizable的任何内容。但是既然你已经用jQuery标记它，你可以通过包含jQuery .js和.css文件来实现这一点。此外，将ID resizable添加到可调整大小的控件并引用该插件。要设置最小高度和宽度，请参阅下面的代码。我对你的jsFiddle的改动包括：

已将id="resizable"添加到您的select
已添加$( "#resizable" ).resizable();
将jQuery的.css文件添加到外部资源
将jQuery的.js文件添加到HTML
（可选）要调整展示位置，请添加此css .ui-resizable-se { bottom: 'some amount'; right: 'some amount'; }

这是一个更新的jsFiddle，它不包括我提到的css或设置最小高度和宽度。

代码：

<select id="resizable" multiple="multiple" height="5" 
    data-bind="options:storedProceduresInDB1, 
    selectedOptions:selectedStoredProceduresInDb1"></select>

$(function() {
    $('#resizable').resizable({
        // to set the min height and width
        minHeight: 100,
        minWidth: 200
        // you could also set a maxHeight and maxWidth as well
    });
});

要将拖动器图标放在select内，我添加了以下css：

.ui-resizable-se { bottom: 18px; right: 25px; }

Answer 2

只需添加 CSS 规则：

select { resize: auto; }

Answer 3

如果有人对此不满意，并且（正当地）不想使用JQuery解决此问题，则可以使用“调整大小” CSS属性：https://www.w3schools.com/cssref/css3_pr_resize.asp

对于作者而言：

添加一些ID或类，以便我们可以在CSS中定位该元素

<select id="resizable" multiple="multiple" height="5" databind="options:storedProceduresInDB1, selectedOptions:selectedStoredProceduresInDb1"> </select>

在CSS中，将属性resize添加到该元素（作者的值均为“ both”，以便他可以调整宽度和高度）

#resizable{
  resize: both;
}

实际上，实际上没有必要在“ select”元素中添加ID，我们只需要在JSFiddle中CSS文件的第6行添加“ resize”属性即可。

.list select[multiple] { width: 100%; height: 8em; resize: both; }

最后，您可以使用经典的CSS属性min-height和min-width设置select的最小大小：

.list select[multiple] { width: 100%; height: 8em; min-width: 100px; min-height: 100px; resize: both; }

使多选列表可调整大小

3 个答案: