-
1. Re: Can't modify rich:autocomplete list style
michpetrov Dec 19, 2012 9:30 AM (in response to kauedg)1 of 1 people found this helpfulWell, 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.
-
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?
-
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.