CODEWITHSUNDEEP
htmlcssjsfrichfaces
Thomas Buckley
Thomas Buckley

Reputation: 6056

Making Tabbed contents Scrollable

I using Richfaces 3.3 and Jsf 2.

I have a tab panel with a number of tabs inside a modal popup. Id like to set the contents of each tab to a fixed height (As the modal screen must always be the same size). This means I have to make the contents of the tabs scrollable, as the content could be longer than the modal screen sometimes.

The code I have attached works for firefox and chrome...but IE does not render it correctly. The main issue with IE is that it doesnt seem to be applying the 'myTestDetailTabPanel' height on the generated element, its simply expaning the tab content as much as is needed.

<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>

EDIT 1 (Adding 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;
}

Any ideas?

Edit 2

It's actually running on JSF 1.2, not 2.0.4.

Maybe this is the cause?

Thanks

Upvotes: 3

Views: 2287

Answers (2)

gaurav
gaurav

Reputation: 21

Set the labelWidth property:

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

Upvotes: 2

Thomas Buckley
Thomas Buckley

Reputation: 6056

I put a rich:panel component inside each tab and applied css rules to this to fix the issue.

<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;
}

Upvotes: 2

Related Questions