-
1. R.4.Final how can i set width in autocomplete?
dasago May 4, 2011 2:01 PM (in response to dasago)Does no one have a solution?
-
2. R.4.Final how can i set width in autocomplete?
dasago May 10, 2011 2:50 AM (in response to 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 over
write the css class rf-au-lst-scrl.
-
3. Re: R.4.Final how can i set width in autocomplete?
edilmar Jun 17, 2011 11:13 AM (in response to dasago)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.
-
4. Re: R.4.Final how can i set width in autocomplete?
edilmar Jun 20, 2011 2:26 PM (in response to edilmar)I registered a bug for this in JIRA. Please vote for solutions... https://issues.jboss.org/browse/RF-11079
-
5. Re: R.4.Final how can i set width in autocomplete?
heitor Jul 13, 2011 8:03 AM (in response to edilmar)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.
-
6. Re: R.4.Final how can i set width in autocomplete?
edilmar Jul 14, 2011 11:03 AM (in response to heitor)Thank you Heitor! This really works!
-
7. Re: R.4.Final how can i set width in autocomplete?
bcn Dec 9, 2011 2:21 PM (in response to edilmar)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
-
8. Re: R.4.Final how can i set width in autocomplete?
ryanyoder Dec 12, 2011 9:13 AM (in response to dasago)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
}
-
9. Re: R.4.Final how can i set width in autocomplete?
bcn Dec 13, 2011 5:25 AM (in response to ryanyoder)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
-
10. Re: R.4.Final how can i set width in autocomplete?
samyomar82 Mar 23, 2012 9:46 PM (in response to bcn)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
-
11. Re: R.4.Final how can i set width in autocomplete?
rohangk Aug 28, 2014 10:00 AM (in response to samyomar82) -
12. Re: R.4.Final how can i set width in autocomplete?
nissrine_na Jan 19, 2016 8:25 AM (in response to rohangk)1 of 1 people found this helpfulHello 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.
-
13. Re: R.4.Final how can i set width in autocomplete?
rohangk Oct 24, 2016 3:52 PM (in response to nissrine_na)Thanks Nissrine. It worked for me