3 Replies Latest reply on Dec 19, 2012 11:10 AM by Michal Petrov

    Can't modify rich:autocomplete list style

    Kaue Grecchi Newbie

      I have the following component

       

      <rich:autocomplete value="#{searchBean.search}" styleClass="inputSearch"
                  autocompleteList="#{objectBean.items}" minChars="4" mode="client" layout="div" var="item">
        <h:column>
            item.name
        </h:column>  
      </rich:autocomplete>
      

       

       

      And the following CSS style

       

       

      .inputSearch .rf-au-inp {
          width: 350px;
      }

       

       

       

      Wich works fine and resizes the specific component's input field. Now I want the autocomplete list to be the same size as the input field:

       

       

      .inputSearch .rf-au-lst-dcrtn .rf-au-lst-scrl {
          width: 350px;
      }

       

       

      And this doesn't work, but if i remove the ".inputSearch" it works for all autocomplete components. What's the problem?

        • 1. Re: Can't modify rich:autocomplete list style
          Michal Petrov Master

          Well, I can tell you why it isn't working but unfortunately not how to solve it.

           

          The suggestion box is a child of the input only while it's inactive, once the suggestions start popping in it will attach itself to <body> and thus it's no longer a child of the .inputSearch and CSS won't find it.

          1 of 1 people found this helpful
          • 2. Re: Can't modify rich:autocomplete list style
            Kaue Grecchi Newbie

            This is the output source code for the closed list:

             

            <span class="rf-au inputSearch" id="contentForm:inputSearch">

             

                <input id="contentForm:inputSearchValue" name="contentForm:inputSearchValue" type="hidden" />

                <span>

                    <input autocomplete="off" class="rf-au-fnt rf-au-inp " id="contentForm:inputSearchInput" name="contentForm:inputSearchInput" type="text" value="VALUE2" />

                </span>

             

                <div class="rf-au-lst-cord" id="contentForm:inputSearchList">

                    <div class="rf-au-shdw">

                        <div class="rf-au-shdw-t"></div>

                        <div class="rf-au-shdw-l"></div>

                        <div class="rf-au-shdw-r"></div>

                        <div class="rf-au-shdw-b"></div>

                            <div class="rf-au-lst-dcrtn ">

                                <div class="rf-au-lst-scrl">

                                    <div id="contentForm:inputSearchItems">

             

                                        <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">

                                            VALUE1

                                        </div>

             

                                        <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">

                                            VALUE2

                                        </div>

             

                                        <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">

                                            VALUE3

                                        </div>

             

                                    </div>

                                <script type="text/javascript">supressed</script>

                            </div>

                        </div>

                    </div>

                </div>

                <script type="text/javascript">supressed</script>

            </span>

             

             

            This is the output source code for the open list:

             

            <span class="rf-au inputSearch" id="contentForm:inputSearch">

             

                <input id="contentForm:inputSearchValue" name="contentForm:inputSearchValue" type="hidden" />

                    <span>

                        <input autocomplete="off" class="rf-au-fnt rf-au-inp " id="contentForm:inputSearchInput" name="contentForm:inputSearchInput" type="text" value="VALUE2" />

                    </span>

             

                    <div class="rf-au-lst-cord" id="contentForm:inputSearchList">

                        <div class="rf-au-shdw">

                            <div class="rf-au-shdw-t"></div>

                            <div class="rf-au-shdw-l"></div>

                            <div class="rf-au-shdw-r"></div>

                            <div class="rf-au-shdw-b"></div>

                            <div class="rf-au-lst-dcrtn ">

                                <div class="rf-au-lst-scrl">

                                    <div id="contentForm:inputSearchItems">

             

                                        <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">

                                            VALUE1

                                       </div>

             

                                        <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">

                                            VALUE2

                                       </div>

             

                                        <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">

                                            VALUE3

                                        </div>

             

                                    </div>

                                <script type="text/javascript">supressed</script>

                            </div>

                        </div>

                    </div>

                </div>

                <script type="text/javascript">supressed</script>

            </span>

             

             

            So, there's no change in the code when the list is open or closed. Maybe the problem lies on the "contentForm:inputSearchList" but how to set a class selector with the ":" generated?

            • 3. Re: Can't modify rich:autocomplete list style
              Michal Petrov Master

              Weird, mine changes (tested in Chrome and Firefox)

               

              closed:

              <span class="rf-au" id="overForm:suggestionBoxId">

                  <input id="overForm:suggestionBoxIdValue" name="overForm:suggestionBoxIdValue" type="hidden">

                      <span>

                          <input autocomplete="off" class="rf-au-fnt rf-au-inp " id="overForm:suggestionBoxIdInput" name="overForm:suggestionBoxIdInput" type="text" value="Animals">

                      </span>

                      <div class="rf-au-lst-cord" id="overForm:suggestionBoxIdList">

                          <div class="rf-au-shdw">

                              <div class="rf-au-shdw-t"></div>

                              <div class="rf-au-shdw-l"></div>

                              <div class="rf-au-shdw-r"></div>

                              <div class="rf-au-shdw-b"></div>

                              <div class="rf-au-lst-dcrtn ">

                                  <div class="rf-au-lst-scrl">

                                      <div id="overForm:suggestionBoxIdItems"></div>

                                  </div>

                              </div>

                          </div>

                      </div>

              </span>

               

              open:

              <span class="rf-au" id="overForm:suggestionBoxId">

                   <input id="overForm:suggestionBoxIdValue" name="overForm:suggestionBoxIdValue" type="hidden" value="W">

                   <span>

                        <input autocomplete="off" class="rf-au-fnt rf-au-inp " id="overForm:suggestionBoxIdInput" name="overForm:suggestionBoxIdInput" type="text" value="Animals">

                   </span>

              </span>

              and the rf-au-lst-cord gets attached at the end of the page under <body>

              <div class="rf-au-lst-cord" id="overForm:suggestionBoxIdList" style="left: 381px; top: 501px; display: block;">

                  <div class="rf-au-shdw">

                      <div class="rf-au-shdw-t"></div>

                      <div class="rf-au-shdw-l"></div>

                      <div class="rf-au-shdw-r"></div>

                      <div class="rf-au-shdw-b"></div>

                      <div class="rf-au-lst-dcrtn ">

                          <div class="rf-au-lst-scrl">

                              <div id="overForm:suggestionBoxIdItems">

                                  <div class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp rf-au-itm-sel rf-au-opt-sel">Water</div>

                              </div>

                          </div>

                      </div>

                  </div>

              </div>

              Kaue Grecchi wrote:

               

               

              So, there's no change in the code when the list is open or closed. Maybe the problem lies on the "contentForm:inputSearchList" but how to set a class selector with the ":" generated?

               

              if you replace the ":" with "\3A " (space at the end) it might work, but probably not in all browsers.