make multi select list resizable

css, jquery, knockout.js

Solution

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:

- Added `id="resizable"` to your `select`

- Added `$( "#resizable" ).resizable();`

- Added jQuery's .css files to the External Resources

- Added jQuery's .js files to the HTML

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

Problem

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

Original source