3 Replies Latest reply on Mar 1, 2013 9:50 AM by apanag

Setting width of a rich:select component

mdmaurer Mar 5, 2012 12:04 PM

I am using a rich:select component to select the 2 character abreviation for a state (CA, AZ, UT, CO, etc.), so I don't need the field to be 25 characters wide. The component has a default width that apparently can't be controlled without overriding an underlying css class (input.rf-sel-inp) in the skin, which makes ALL the rich:select components on my page have that same width. I need multiple instances of rich:select on the same page but with different widths. The old h:selectOneMenu defaults to the width of the widest element in it's list, and can also be manually controlled with the 'style=' attribute; which is far better than rich:select that has no intelligence at all and cannot be controlled with a simple attribute setting. Is there a simple way to accomplish this with rich:select?

1. Re: Setting width of a rich:select component

sunkaram Mar 5, 2012 12:49 PM (in response to mdmaurer)

not sure if you can achive this..looks like you can control width only by overriding input.rf-sel-inp class. But that results in same width for all rich:select components.

https://issues.jboss.org/browse/RF-10763
Actions
2. Re: Setting width of a rich:select component

jamesc1 Mar 30, 2012 5:58 PM (in response to mdmaurer)

Override the CSS on input.rf-sel-inp but also make it more specific by adding an id for each element. That way your CSS rule will take precedence to the one richfaces already has. You should be able to do this for each of your components.

Example CSS:

#mySelect1 input.rf-sel-inp {
width: 100px;
}

#mySelect2 input.rf-sel-inp {
width: 2ex;
}

Assuming component is inside form with id=form I have used the following

#form\3A mySelect3 input.rf-sel-inp {
width: 2ex;
}
Actions
3. Re: Setting width of a rich:select component

apanag Mar 1, 2013 9:50 AM (in response to mdmaurer)

I find the following quite elegant.

<rich:select styleClass="rf-select-small-width" ...>
<f:selectItems value="#{bean...}"/>
</rich:select>

and css:
.rf-select-small-width input[type="text"] {
width: 50px;
}

It works fine for me and I highly recommend it.
Tested with RichFaces version 4.3.0.Final
- See more at: https://community.jboss.org/wiki/ChangeRichselectsWidth#comment-11661
1 of 1 people found this helpful
Actions

Go to original post