使多选列表可调整大小

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 所做的更改包括：

1. 已将id="resizable" 添加到您的select
2. 已添加$( "#resizable" ).resizable();
3. 将 jQuery 的 .css 文件添加到外部资源中
4. 将 jQuery 的 .js 文件添加到 HTML
5. （可选）要调整拖动器的位置，请添加此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

如果有人遇到这个问题并且（合法地）不想使用 JQuery 来解决这个问题，您可以使用“resize”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 来设置选择的最小尺寸：

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

Answer 3

只需添加 CSS 规则：

select { resize: auto; }