PrimeFaces DatePicker显示图标时输入框宽度不一致问题咨询

问题描述 #

在<p:panelGrid>中同时放置普通输入框、无图标DatePicker，以及设置了showIcon="true"且showOnFocus="false"的DatePicker时，带图标的DatePicker宽度会明显大于另外两者，导致布局错位。使用版本为PrimeFaces v15.0.3及PrimeFaces Test Project。

问题代码示例 #

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="jakarta.faces.facelets"
      xmlns:f="jakarta.faces.core"
      xmlns:h="jakarta.faces.html"
      xmlns:p="primefaces">

    <h:head>
        <title>PrimeFaces Test</title>
        <h:outputScript name="test.js" />
        <h:outputStylesheet name="test.css" />
    </h:head>
    <h:body>
        <h1>#{testView.string}</h1>
        <h:form id="frmTest">
            <p:panelGrid style="width: 25%;" columns="2">
                <p:outputLabel value="name" />
                <p:inputText />
                <p:outputLabel value="date-1" />
                <p:datePicker />
                <p:outputLabel value="date-2" />
                <p:datePicker showIcon="true" showOnFocus="false" />
            </p:panelGrid>
        </h:form>
    </h:body>
</html>

简便解决方法 #

通过自定义CSS调整带图标的DatePicker容器及内部输入框的宽度，使其与其他输入组件对齐：

1. 在test.css中添加以下样式：

/* 让带图标的DatePicker容器占满父容器宽度 */
.p-datepicker.p-datepicker-icon {
    width: 100%;
}

/* 调整输入框宽度，抵消图标容器的额外空间 */
.p-datepicker.p-datepicker-icon .p-inputtext {
    width: calc(100% - 40px);
}

2. 若上述样式适配性不佳，可尝试更通用的全局调整：

/* 统一所有输入组件的宽度为100% */
.p-inputtext, .p-datepicker {
    width: 100% !important;
}

/* 单独调整带图标DatePicker的内部输入框 */
.p-datepicker.p-datepicker-icon .p-inputtext {
    width: calc(100% - 40px) !important;
}

原理说明 #

带图标的DatePicker默认容器未设置100%宽度，而普通输入框默认占满父容器空间，通过CSS强制容器宽度为100%，并计算输入框宽度扣除图标的占用空间，即可实现所有组件宽度一致。

内容的提问来源于stack exchange，提问作者sweintritt