resizable drop-down panel for combo elements

[mzeddd]

Hi,

Sometimes I can see situation when text length for some items in combo elements is to big to fit panel size.
Due to this fact horisontal scroll bar appears.

I think would be good to have the following options to solve this issue:
- Add new parameter maxPanelWidth (in addition to panelWidth) and let panel width to vary between panelWidth and maxPanelWidth.
  In this case by default width of panel will be equal to panelWidth. But in case if text is a little bigger than panel could fit then panel should be extanded "a little" to fit this text (but not more than maxPanelWidth)

- Allow user to resize panel. i.e. change change panelWidth/panelHeight using mouse like we resize windows.
  In this case combo should of course remember new parameters.

[stworthy]

It is easy to make the drop-down panel resizable. Here is the extended method to achieve this functionality.

Code:

$.extend($.fn.combo.methods,{
    resizablePanel: function(jq){
       return jq.each(function(){
              var state = $(this).data('combo');
              var p = $(this).combo('panel');
              p.panel('panel').resizable({
                     onStartResize:function(e){
                            if (state.proxy){state.proxy.remove();}
                            state.proxy = $('<div></div>').appendTo('body');
                            state.proxy.css({
                                   position:'absolute',
                                   background:'#fafafa',
                                   border:'1px dashed red',
                                   filter:'alpha(opacity=5)',
                                   opacity:0.5,
                                   zIndex: 9999999999,
                                   left: e.data.left,
                                   top: e.data.top
                            });
                            state.proxy._outerWidth(e.data.width)._outerHeight(e.data.height);
                     },
                     onResize:function(e){
                            state.proxy.css({
                                   left:e.data.left,
                                   top:e.data.top
                            })
                            state.proxy._outerWidth(e.data.width)._outerHeight(e.data.height);
                            return false;
                     },
                     onStopResize:function(e){
                            p.panel('resize', {
                                   width:e.data.width,
                                   height:e.data.height
                            });
                            state.proxy.remove();
                            state.proxy = undefined;
                     }
              })
       })
    }
})

Usage example:

Code:

$('#c1').combobox('resizablePanel');
$('#c2').combogrid('resizablePanel');

[mzeddd]

Hi stworthy!

Thanks!

Is it possible to turn it from method to option (true/false)?
And make it available for everybody with next version?