fit scrollbars in grid cell with custom renderer

[tab]

I can put a list in grid cell using a custom renderer. (Ext is so cool!) but I want the vertical scroll bar to fit into the cell. What happens is that a horizontal scrollbar is created and if I scroll over I can see the vertical bars. Maybe the fix is obvious to someone with more experience but not to me! Here is the renderer:

    function cprender(val,cell,record,row,column,ds)
    {
    	
    	var x = '<div style="overflow:auto;"><select name="Morefruit" size="4"><div style="overflow:hidden;"><option selected>Apples</option>';
		x += 	'<option>Bananas</option><option>Oranges</option><option>Watermelon</option>';
		x +=	'<option>Kiwi</option></div></select></div>';
		return x;
    }

Get cell size? Then do something with it?
Thanks

[jsakalos]

I would consider using combo editor in this case.

[jsakalos]

Some more thoughts....

Renderer RENDERS data, combo is an input of data. That would mean I wouldn't put combo in renderer as user could be confused that he/she can edit the value. I would use combo in the editor only.

By the way, have you watched those 2 screencasts on grid that you can find somewhere in this forum?

[tryanDLS]

I don't think you're gonna have much success making that do what you want x-browser. I would suggest that use a combo control - see the edit-grid example.

[matjaz]

Div tag inside of select ?
This isn't even a valid HTML !

[jsakalos]

Sorry, I don't understand your last post.

That what looks like select element in Ext is much more than simple html select element. Use firebug to find out.