make multi select list resizable

Question

How do i make this multi select list resizable ? I want to set the default hight and width and minimum height and width of the list, but be able to resize it on my own.

I'vr tried this without success:

<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

In your jsFiddle, I don't see $('#resizable').resizable(); and you don't have anything with an ID of resizable. But since you have tagged it with jQuery, you can accomplish this by including the jQuery .js and .css files. Also, add an ID of resizable to the control that will be resizable and reference the plugin. To set the minimum height and width, see the code below. My changes to your jsFiddle include:

1. Added id="resizable" to your select
2. Added $( "#resizable" ).resizable();
3. Added jQuery's .css files to the External Resources
4. Added jQuery's .js files to the HTML
5. (Optional) To adjust the position of the dragger, add this css .ui-resizable-se { bottom: 'some amount'; right: 'some amount'; }

Here is an updated jsFiddle, which does not include the css I mentioned or setting the minimum height and width.

And the code:

<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
    });
});

To position the dragger icon inside the select, I added the following css:

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

Answer 2

If anyone is stumbling upon this and (legitimately) don't want to use JQuery to solve this problem, you can just use the "resize" CSS property: https://www.w3schools.com/cssref/css3_pr_resize.asp

In the case of the author:

• add some id or class so that we can target that element in the css

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

• In the CSS, add the property resize to that element (with the value "both" for the author, so that he can adjust both width and height)

#resizable{
  resize: both;
}

---

Actually there is no real need to add an id to the "select" element, we just have to add the "resize" property at the 6th line of the CSS file in the JSFiddle:

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

---

Finally, you can use classic css properties min-height and min-width to set minimum size of the select:

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