Navigation Buttons inide combobox

[devnull]

Hi;

I am running short of space and have 2 small buttons on the right of many comboboxes "<" ">" in order to navigate back and forth through the records rather than clicking and selecting the combo, it works well.

But I would like to move these 2 little buttons (which look similar to the dropdown combo arrow only pointing left and right) into the right hand side of the combobox and only show them when the user hovers the mouse over them, can this be done ?

I see under the demo section there is an example of adding extra icons to a textbox/combo, but these consume text width inside the combobox and I cannot afford to loose any text width, so the icons would need to be overlaid ontop of the text and only be visible when they are hovered over.

The intention would be to have these buttons added to any combo with a class name of "navi" so when I add a new combo, I can switch on this feature just by adding the class rather than by hard-coding each occurrence of the combo.

[stworthy]

You can add extra icons with multiple class name. The code below shows how to add an icon with 'navi' class, which is hidden and only show when hovering on it.

Code:

<style type="text/css">
	.navi{
		opacity: 0.0;
	}
	.navi:hover{
		opacity: 0.6;
	}
</style>
<script>
$(function(){
	$('#cc').combobox({
		icons:[{
			iconCls:'icon-search navi'
		}]
	})
})
</script>