Делаем содержимое с вкладками прокручиваемым - PullRequest
Новая
       3

Делаем содержимое с вкладками прокручиваемым

2 голосов
/ 23 марта 2011

Я использовал 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 и 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.

Может быть, в этом причина?

Спасибо

Ответы [ 2 ]

1 голос
/ 05 октября 2012

Установите свойство labelWidth: 

 <rich:tab labelWidth="200px" label="firsttab">
1 голос
/ 13 апреля 2011

Я поместил в каждую вкладку компонент rich: panel и применил к нему правила 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;
}
...