13 Replies Latest reply on Oct 24, 2016 3:52 PM by rohangk

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

    dasago

      How can i set width in rich:autocomplete?

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

          Does no one have a solution?

          • 2. R.4.Final how can i set width in autocomplete?
            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.

            • 3. Re: R.4.Final how can i set width in autocomplete?
              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:

              autocompleteListBoxSize.jpeg

              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

                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

                  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

                    Thank you Heitor! This really works!

                    • 7. Re: R.4.Final how can i set width in autocomplete?
                      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

                      • 8. Re: R.4.Final how can i set width in autocomplete?
                        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

                        }

                        • 9. Re: R.4.Final how can i set width in autocomplete?
                          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

                          • 10. Re: R.4.Final how can i set width in autocomplete?
                            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

                            • 11. Re: R.4.Final how can i set width in autocomplete?
                              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

                              autocompleteListBoxSize.jpeg

                              • 12. Re: R.4.Final how can i set width in autocomplete?
                                nissrine_na

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

                                 

                                in JSF css files :

                                 

                                Capture.PNG

                                 

                                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.

                                1 of 1 people found this helpful
                                • 13. Re: R.4.Final how can i set width in autocomplete?
                                  rohangk

                                  Thanks Nissrine. It worked for me