rich:autocomplete breaks style of the page

Question

I've been implementing address autocompletion for our project which uses RichFaces 4.3.0.Final. I've used rich:autocomplete tag. Autocomplete works fine, but style of our page breaks. Here's how our fields looks like without rich:autocomplete:

And here's how it looks with tag in place:

Here's HTML generated by RichFaces for h:inputText:

<span id="manualEligibilityCheck:zipWrapper">
    <span id="manualEligibilityCheck:j_idt111">
        <script id="manualEligibilityCheck:j_idt111Script" type="text/javascript">new RichFaces.ui.Placeholder("manualEligibilityCheck:j_idt111", {"targetId":"manualEligibilityCheck:zip","text":" ZIP"} );</script>
    </span>
    <input id="manualEligibilityCheck:zip" type="text" name="manualEligibilityCheck:zip" class="form-control rf-plhdr" autocomplete="off">
</span>

And here's HTML generated by RichFaces for rich:autocomplete:

<span id="manualEligibilityCheck:zipWrapper">
    <span id="manualEligibilityCheck:j_idt111">
        <script id="manualEligibilityCheck:j_idt111Script" type="text/javascript">new RichFaces.ui.Placeholder("manualEligibilityCheck:j_idt111", {"targetId":"manualEligibilityCheck:zip","text":" ZIP"} );</script>
    </span>
    <span class="rf-au form-control" id="manualEligibilityCheck:zip">
        <input id="manualEligibilityCheck:zipValue" name="manualEligibilityCheck:zipValue" type="hidden">
        <span>
            <input autocomplete="off" class="rf-au-fnt rf-au-inp rf-plhdr" id="manualEligibilityCheck:zipInput" name="manualEligibilityCheck:zipInput" type="text">
        </span>
        <div class="rf-au-lst-cord" id="manualEligibilityCheck:zipList">
            <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">
                        <table id="manualEligibilityCheck:zipItems" class="rf-au-tbl">
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">new RichFaces.ui.Autocomplete("manualEligibilityCheck:zip",
                    "manualEligibilityCheck:zipInput", {"buttonId":"manualEligibilityCheck:zipButton","minChars":1,"isCachedAjax":false} 
                    );</script>
    </span>
</span>

Here's the JSF code for rich:autocomplete field:

<h:panelGroup id="zipWrapper">
    <rich:autocomplete id="zip" styleClass="form-control"
            value="#{manualEligibilityCheck.customer.zipCode}"
            required="#{manualEligibilityCheck.emptyPhoneNrSiteId}"
            requiredMessage="#{messages['cct.manualEligibilityCheck.zip']} #{messages['cct.manualEligibilityCheck.validation.requiredField']}"
            disabled="#{manualEligibilityCheck.companyInfoDisabled or manualEligibilityCheck.disableAll}"
            autocompleteMethod="#{manualEligibilityCheck.addressSearch.autocompleteZip}" 
            minChars="1" 
            mode="ajax" 
            var="zipdata"
            layout="table"
            fetchValue="#{zipdata.zipcode}">
        <rich:placeholder
            value="#{messages['cct.manualEligibilityCheck.zip']}" />
        <rich:column>
            <h:outputText value="#{zipdata.zipcode}"/>
        </rich:column>
        <rich:column>
            <h:outputText value="#{zipdata.city}"/>
        </rich:column>
    </rich:autocomplete>
</h:panelGroup>

The problem is here, that RichFaces adds extra span tag around input field and applies style class not to input field but to upper span. I was not able to find any proper solution for this problem and because of this RichFaces "feature" I have to drop rich:autocomplete from our code and switch to use JavaScript with JQuery.

Does someone encountered similar problem and found working solution for fixing the styles?

Answer 1

Use inputClass property instead of styleClass to tell RichFaces that you want the class to appear on the element:

<rich:autocomple inputClass="form-control"/>

or use CSS selectors to apply styles on the input rather than on the span, e.g.:

.form-control input {
    ...styles go here...
}