I have a number of rich combo boxes on my page (see attached).

One of the boxes contains product names. Users could choose any product and click on Add button to include them in their request.

Some product names are very similar and differ only by a word on the end.

User asked, if we could make one box with ID "productInp" not to drop down, so that it doesn't overlap with what was already selected and currently shows on the screen.

We thought that in order to do it we could just modify custom style classes rich-combobox-list-position and rich-combobox-shadow such as shown below:

.rich-combobox-list-position {

left: 100px;

}

.rich-combobox-shadow {

left: 100px;

}

That works, but only if we include it in the style section for the whole XHTML page. Then, affects all combo boxes on the page.

It doesn't work, if I try to include it in inline definition of just one combo box.

I tried using listClass or listStyle instead, but it doesn't work at all.

So, we ended up writing a custom JavaScript function, which is triggered by onfocus event and does the styling for the selected combo box.

It works fine, but I am still curious, why more simple solutions described above wouldn't.

We are using IE 9 and RichFaces 3.3.1.GA (shame on us for being so behind ).

Would appreciate a response.