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

Can't modify rich:autocomplete list style

kauedg Dec 18, 2012 2:13 PM

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

michpetrov Dec 19, 2012 9:30 AM (in response to kauedg)

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
Actions
2. Re: Can't modify rich:autocomplete list style

kauedg Dec 19, 2012 10:30 AM (in response to michpetrov)

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?
Actions
3. Re: Can't modify rich:autocomplete list style

michpetrov Dec 19, 2012 11:10 AM (in response to kauedg)

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.
Actions

Go to original post