使多选列表可调整大小

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

如果有人偶然发现这个问题并且（合法地）不想使用 JQuery 来解决这个问题，您可以使用“resize”CSS 属性：https://www.w3schools.com/cssref/css3_pr_resize.asp

以作者为例：

• 添加一些 id 或 class，以便我们可以在 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 2

在你的 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; }