Question

我的应用程序中有一个rich：autocomplete下拉选择器。在用户开始输入文本时显示的下拉列表中，已加载到选择列表中的字符串将很乐意显示到下拉列表的整个宽度。但是，一旦你做出选择，只会显示大约34个字符串的字符串，结果是最终用户必须在输入框中左右滚动才能看到整个字符串，请看这里（StackOverflow不允许我发布内联图片）：http://imgur.com/Y9LLaBi

这是前端XHTML文件中的违规表格单元格。它使用JSF和richfaces命名空间，并且有一个支持bean可以创建自动完成建议列表并执行其他业务逻辑，但我相信这是唯一相关的代码：

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

要使下拉框左对齐文本并与输入字段的宽度相同，以下CSS位于XHTML文件的顶部：

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

但是，似乎没有与输入框中显示文本的宽度相关的CSS属性，因此它看起来与最终用户截止，并且仅填充输入框中可用空间的一半左右！有人可以帮忙吗？谢谢！

Answer 1

rf-au-fnt是输入的类，您已经覆盖它，所以只需添加宽度。

作为旁注，您应该为组件设置一个类，而不是直接覆盖RichFaces类，然后编写样式表，如

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

这样你就不会改变你不想要的东西。

rich：autocomplete截断选定的文本以供显示

1 个答案: