R.4.Final how can i set width in autocomplete?

[dasago]

How can i set width in rich:autocomplete?

[dasago]

Does no one have a solution?

[dasago]

I find it out: You have to set the attribute inputClass. e.g.:

inputClass="autoCompleteWidth50"

.autoCompleteWidth50 {

    width:50px !important;

}

Without !important it doesn't work. If you want to set a default width for all autocomplete components you can overwrite the class .rf-au-inp. If the selectBox is too big you can also overwrite the css class rf-au-lst-scrl.

[edilmar]

Hi,

Really inputClass works fine to increase input box of autocomplete component.

But I would like to increase the size of the list box of items too.

I tried to use popupClass, but this class increased only part of the list, causing a strange visual effect like this:

Look that the vertical scroll bar continues limited by default size of the component. I put inputClass and popupClass with 250px, and the default is 182px. I didn't find any other class to allow increasing list box size.

[edilmar]

I registered a bug for this in JIRA. Please vote for solutions... https://issues.jboss.org/browse/RF-11079

[heitor]

Edilmar, I had the same problem!

Using the firebug, I saw one class that set the max height and the width of the list:

.rf-au-lst-scrl{

    max-height:300px !important;

    width:100% !important

}

Use this and his problem will be resolved.

[edilmar]

Thank you Heitor! This really works!

[bcn]

Any idea how I can do this for a specific autocomplete on a page without changing this for other autocompletes on the same page?

If you overwrite the class in the header of the page, all autocompletes are changed.

Thanks

[ryanyoder]

This is a css fix.  If you don't want this to apply to all components on the page then use a descendent selector.

You should learn what a descendent selector is but in a nutshell, if you have a paragraph with an id of "myParagraph" and you want all labels inside that paragraph to be bold you do this on your page in a style directive.

#myParagraph label { font-weight:bold;}

So the same could be done for the autocomplete.

<style>

#myAutoCompleteContainerOrComponent .rf-au-lst-scrl {

    max-height:300px !important;

    width:100% !important

}

</style>

Put this on your page and you can control the component.

If you want it all in the CSS then you can make a class for it called threeHundredWideAutoComplete.

I think this will work but I haven't tried it.

.threeHundredWideAutoComplete .rf-au-lst-scrl {

    max-height:300px !important;

    width:100% !important

}

[bcn]

Thanks for the help!

I tried both suggestions, but it does not work for me. I see in firebug that the style / computed style is set, but on the screen, the width does not change. Very strange. If I go back and redefine the whole class, it works.

Regards

[samyomar82]

I used this

<h:outputStylesheet>

.autoCompleteWidth50 {

    width:300px !important;

}

  .rf-au-lst-scrl {

    width:300px !important;

    height:300px;

    max-height: 500px;

          min-height: 300px;

}

.autoCompletePopupHieght {

    width:300px !important;

    height:300px !important;

}

</h:outputStylesheet>

and

			<rich:autocomplete
			inputClass="autoCompleteWidth50"
			popupClass="autoCompletePopupHieght"
			>
			</rich:autocomplete>

it worked with me

[rohangk]

I am still facing this issue, I tried all the suggestions above but the width with the scrollbar does not increase. i am using RF 4.3.6.Final

[nissrine_na]

Hello Rohan, i faced the same problem, here's my solution :

in JSF css files :

the class .rf-au-lst-scrl is applied to the scroll list, all you need to do is add this code to you stylesheet :

.rf-au-lst-scrl {

  width : 140px !important;

}

and you can choose any width  you want.

I hope i was clear enough.

[rohangk]

Thanks Nissrine. It worked for me