rich：autocomplete会截断要显示的选定文本

Question

I have a rich:autocomplete dropdown selector in my application. In the dropdown list that appears as the user begins entering text, the strings that have been loaded into the list of selections will happily display out to the entire width of the dropdown. However, once you make a selection only about 34 characters of the string will be displayed, with the result that the end user has to scroll left and right in the input box to see the entire string, see here (StackOverflow won't allow me to post inline images yet): http://imgur.com/Y9LLaBi

Here's the offending table cell in the frontend XHTML file. It uses the JSF and richfaces namespaces and there's a backing bean that creates the autocomplete suggestion list and executes other business logic, but I believe this is the only relevant code:

<td height="20" class="addborderright addborderbottom inputbox" colspan="4">&nbsp;
    <!-- nb: richfaces autocomplete to ensure proper name entry -->
    <h:message styleClass="errormsg" for="campusName" />
    <rich:autocomplete id="campusName" length="50" mode="client" minChars="1"
        layout="table" autofill="true" selectFirst="true" 
        onselectitem="javascript:executeAction( 
        '#studentComplaintCampusInformationBean.formName}',
        'populateCampusAddressFieldsLink');" 
        value="#{studentComplaintCampusInformationBean.campus.operatingName}"
        autocompleteList="#{studentComplaintCampusInformationBean.registeredCampusNameList}" 
        style="width:370px" fetchValue="#{fn}" var="fn" maxlength="100">
            <rich:column>#{fn}</rich:column>
    </rich:autocomplete>
</td>

To make the dropdown box left-justify text and be the same as the width of the input field the following CSS is at the top of the XHTML file:

<style>
.rf-au-fnt{
    text-align: left; float: left;
}
.rf-au-lst-dcrtn .rf-au-lst-scrl {
    width: 370px; !important
}
</style>

However, there doesn't appear to be a CSS property relating to the width of the displayed text in the input box, so it appears cut off to the end user, and only fills about half the available space in the input box! Could someone please help? Thanks!

Answer 1

rf-au-fnt is the class of the input, you're already overriding it so just add the width.

As a sidenote, rather than directly overriding the RichFaces classes you should set a class for the component and then write stylesheets like

.myAutocomplete .rf-au-fnt {text-align: left; float: left; width: 370px !important
}

This way you don't change something you wouldn't want to.