Ajax 如何避免未显示的区域的空白？

我必须根据所选的radiobutton显示或隐藏两个OutputPanel，如下代码所示：

<p:outputLabel style="width:20%" value="Time unit"></p:outputLabel>
<p:selectOneRadio style="width:34%;margin-left:20%" id="choix" value="#{graphe.choix_aff}">
    <f:selectItem itemLabel="Month" itemValue="mois" />
    <f:selectItem itemLabel="Day" itemValue="jour" />
    <f:selectItem itemLabel="Hour" itemValue="heure" />
    <p:ajax update="panel1,panel2"  listener="#{graphe.handleChange}" />
</p:selectOneRadio>  

<p:outputPanel id="panel1">
    <p:calendar style="width:600px" rendered="#{graphe.display_cal()}" id="popup1" value="#{graphe.date1}">
    </p:calendar>
</p:outputPanel>  

<p:outputPanel id="panel2">
    <p:calendar style="width:600px" id="t" value="#{graphe.date3}" pattern="MM/dd/yyyy HH" rendered="#{graphe.display_h()}">
    </p:calendar>
</p:outputPanel>

如果我选择“小时”选项，日历（面板2）将显示在一些空行（面板1的空行）之后

我怎样才能解决这个问题？

---

谢谢。

带有未渲染日历的面板应渲染为零高度

div

，因此它应不可见。为什么它不是零高度？也许你有一个CSS样式来设置它的高度？您应该使用浏览器的开发人员工具准确地检查这些空行的来源。