使多选列表可调整大小

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

- Henrik

Answer 1

如果有人偶然发现这篇文章并且（真正地）不想使用jQuery来解决这个问题，那么你可以使用CSS属性“resize”：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的第6行CSS文件中添加“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; }

- bistendope

---

我更新了我的答案，包括在作者情况下该怎么做。 - bistendope

Answer 2

在你的jsFiddle中，我没有看到 $('#resizable') .resizable(); ，你没有任何一个ID为 resizable 的控件。但是由于您已经标记了jQuery，您可以通过包含jQuery .js和.css文件来完成此操作。此外，将可调整大小的控件添加ID resizable 并引用插件即可。要设置最小高度和宽度，请参见下面的代码。我对你的jsFiddle所做的更改包括：

1. 向您的 select 添加 id ="resizable"
2. 添加 $（“＃resizable”）。resizable（）;
3. 在外部资源中添加jQuery的.css文件
4. 在HTML中添加jQuery的.js文件
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; }

- Brian

Answer 3

只需添加CSS规则：

select { resize: auto; }

- Dmitry Shashurov