我创建了 ap:gridPanel,在其中我用不同的 colSpan 绘制了 p:panels。这些面板包含一个 h:outputText。在每个面板上,我放置 ap:resizable 以更改宽度。但是,第一次调整大小时,面板会捕捉到子元素 (h:outputText) 的宽度并从其宽度开始调整大小。
<c:forEach items="#{dataHandler.employees}" var="employee">
<p:row>
<p:column styleClass="employeeColumn">
<h:outputText value="#{employee.name}" styleClass="standardText"/>
</p:column >
<c:forEach items="#{employee.activities}" var="activity">
<p:column colspan="#{activity.duration}">
<c:choose>
<c:when test="#{activity.category == 'empty'}"/>
<c:otherwise>
<p:panel id="#{activity.id}" styleClass="activityPanel"
style="background-color:#{activity.color}">
<h:outputText value="#{activity.name} - #{activity.duration} days" styleClass="activityText"/>
</p:panel>
<p:resizable for="#{activity.id}" handles="e,w" grid="22" minHeight="15" maxHeight="15"/>
<p:draggable for="#{activity.id}" handle=".ui-panel-titlebar" stack=".ui-panel" grid="23,15"
containment="containment"/>
<p:tooltip for="#{activity.id}" styleClass="toolTip">
#{activity.name} <br/> #{employee.name} <br/>from #{activity.startTime} to #{activity.endTime}
</p:tooltip>
</c:otherwise>
</c:choose>
</p:column>
</c:forEach>
</p:row>