Question

我使用Richfaces 3.3和Jsf 2.

我有一个标签面板，在模式弹出窗口中有许多标签。我想将每个标签的内容设置为固定高度（因为模式屏幕必须始终具有相同的大小）。这意味着我必须使选项卡的内容可滚动，因为有时内容可能比模态屏幕更长。

我附加的代码适用于firefox和chrome ......但IE无法正确呈现它。 IE的主要问题是它似乎没有在生成的元素上应用'myTestDetailTabPanel'高度，它只是根据需要简单地显示标签内容。

<rich:tabPanel id="testTabPanel" value="#{myBean.selectedTab}"
        selectedTab="#{myBean.selectedTab}" switchType="client"
        style="width:100%; height: 465px" contentClass="myTestDetailTabPanel">

        <rich:tab id="Detail" label="TEST">

            <h:panelGrid columns="2" style="table-layout:fixed; width:100%;" cellpadding="3" columnClasses="vcnDetailTextRight,textLeft">
                ....Various rows and columns...
            </h>

        </rich:tab>

</rich:tabPanel>

编辑1（添加Html＆amp; Css）

<TABLE class=rich-tabpanel-content-position border=0 cellSpacing=0 cellPadding=10 width="100%">
    <TBODY>
        <TR>
            <TD class="rich-tabpanel-content myRequestsTabPanelLayout">
                <TABLE style="WIDTH: 100%; TABLE-LAYOUT: fixed" cellPadding=3>
                    <TBODY>
                        <TR>
                            <TD><LABEL>test:</LABEL></TD>
                            <TD><SPAN>edwfrwefrewf</SPAN></TD>
                        </TR>
                    </TBODY>
                </TABLE>
            </TD>
        </TR>
    </TBODY>
</TABLE>

.myRequestsTabPanelLayout {
    height: 398px;      
    display: block;
    overflow-x: hidden;
    overflow-y: auto;       
    padding: 10px 0px 10px 0px;
    #padding: 10px 15px 10px 15px;
    margin-bottom: 15px;
}

有什么想法吗？

编辑2

它实际上是在JSF 1.2上运行，而不是2.0.4。

也许这就是原因？

由于

Answer 1

我在每个标签页面中放置了一个rich：面板组件，并将css规则应用于此以解决问题。

<rich:tabPanel id="testTabPanel" value="#{myBean.selectedTab}"
        selectedTab="#{myBean.selectedTab}" switchType="client"
        style="width:100%; height: 465px" contentClass="myTestDetailTabPanel">

        <rich:tab id="Detail" label="TEST">

            <rich:panel styleClass="requestDetailPanel">

              <h:panelGrid columns="2" style="table-layout:fixed; width:100%;" cellpadding="3" columnClasses="vcnDetailTextRight,textLeft">
                ....Various rows and columns...
              </h>

            </rich:panel>

        </rich:tab>

</rich:tabPanel>

.myTestDetailTabPanel {
    height: 380px;
    margin: 0px;    
    padding: 0px;       
}

.requestDetailPanel {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px 5px 0px 0px;
    border: none;
}

Answer 2

设置labelWidth属性：

 <rich:tab labelWidth="200px" label="firsttab">

制作选项卡内容可滚动

编辑1（添加Html＆amp; Css）

编辑2

2 个答案: