8 Replies Latest reply: Mar 23, 2012 8:16 AM by user10047839 RSS

    How to make a panelTabbed occupy all the available space?

    user10047839
      Hello,

      I have this simple structure in my page, but I cannot make the panelTabbed occupy all the available space in the page:

      Page:
      panelStretchLayout
         Facet Center:
           PanelGroupLayout - Scroll
              PanelBox
              PanelTabbed
                  ShowDetail1 (anything inside, tables, etc..)
      Now, the panelBox and and panelTabbed are at the same level. But I cannot get the tabs expanded according to the max available space under the panelBox.
      Do you have any idea , are there any special properties to set?
        • 1. Re: How to make a panelTabbed occupy all the available space?
          Ayhan Gungor
          use styleClass attribute as:
          <af:panelGroupLayout id="pgl4" layout="scroll">
            <af:panelBox text="PanelBox2" id="pb2">
            </af:panelBox>
            <af:panelTabbed id="pt1" styleClass="AFStretchWidth">
          • 2. Re: How to make a panelTabbed occupy all the available space?
            Subramanian Meyyappan
            is this is your need?

            option1:
            <?xml version='1.0' encoding='UTF-8'?>
            <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:h="http://java.sun.com/jsf/html"
                      xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
              <jsp:directive.page contentType="text/html;charset=UTF-8"/>
              <f:view>
                <af:document id="d1">
                  <af:form id="f1">
                    <af:panelStretchLayout id="psl1">
                      <f:facet name="bottom"/>
                      <f:facet name="center">
                        <af:panelGroupLayout id="pgl1" layout="scroll">
                          <af:panelBox text="PanelBox1" id="pb1">
                            <f:facet name="toolbar"/>
                            <af:panelTabbed id="pt1" styleClass="AFStretchWidth">
                              <af:showDetailItem text="showDetailItem 1" id="sdi1"/>
                              <af:showDetailItem text="showDetailItem 2" id="sdi2"/>
                            </af:panelTabbed>
                          </af:panelBox>
                        </af:panelGroupLayout>
                      </f:facet>
                      <f:facet name="start"/>
                      <f:facet name="end"/>
                      <f:facet name="top"/>
                    </af:panelStretchLayout>
                  </af:form>
                </af:document>
              </f:view>
            </jsp:root>
            Ayhan Gungor      ah ah beated in me in 2sec :)


            option 2:
            <?xml version='1.0' encoding='UTF-8'?>
            <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:h="http://java.sun.com/jsf/html"
                      xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
              <jsp:directive.page contentType="text/html;charset=UTF-8"/>
              <f:view>
                <af:document id="d1">
                  <af:form id="f1">
                    <af:panelStretchLayout id="psl1">
                      <f:facet name="bottom"/>
                      <f:facet name="center">
                        <af:panelGroupLayout id="pgl1" layout="scroll">
                          <af:panelBox text="PanelBox1" id="pb1">
                            <f:facet name="toolbar"/>
                            
                          </af:panelBox>
                          <af:panelTabbed id="pt1" styleClass="AFStretchWidth">
                              <af:showDetailItem text="showDetailItem 1" id="sdi1"/>
                              <af:showDetailItem text="showDetailItem 2" id="sdi2"/>
                            </af:panelTabbed>
                        </af:panelGroupLayout>
                      </f:facet>
                      <f:facet name="start"/>
                      <f:facet name="end"/>
                      <f:facet name="top"/>
                    </af:panelStretchLayout>
                  </af:form>
                </af:document>
              </f:view>
            </jsp:root>
            thanks Ayhan Gungor

            update in late.
            • 3. Re: How to make a panelTabbed occupy all the available space?
              Ayhan Gungor
              attention to PanelBox and PanelTabbed order
              • 4. Re: How to make a panelTabbed occupy all the available space?
                user10047839
                to everyone:

                it seems the ADFStretchWidth works only for width, not for height of the PanelTab.
                the panelTabbed is not inside a PanelBox, it's below it. Both are inside a facet center of PanelStretchLayout (through a panelgroup - scroll)
                • 5. Re: How to make a panelTabbed occupy all the available space?
                  Subramanian Meyyappan
                  if you want increases the height of the panel tab means use some
                  inlineStyle="height:550px;" proerpty
                  i hope you want to occy whole browser window means increases and decrease componet height as you want ..

                  Edited by: ADF7 on Mar 23, 2012 5:17 AM
                  • 6. Re: How to make a panelTabbed occupy all the available space?
                    Ayhan Gungor
                    if you want panelTabbed component to stretch all direction, you should use another panelStretchLayout like this:
                    <af:panelStretchLayout id="psl1">
                      <f:facet name="center">
                        <af:panelStretchLayout id="psl2" topHeight="auto">
                          <f:facet name="top">
                            <af:panelBox text="PanelBox2" id="pb2">
                              <af:outputText value="PanelBox" id="ot1"/>
                            </af:panelBox>
                          </f:facet>
                          <f:facet name="center">
                            <af:panelTabbed id="pt1">
                              <af:showDetailItem text="showDetailItem 1" id="sdi1" stretchChildren="first">
                                <af:outputText value="outputText6" id="ot6"/>
                              </af:showDetailItem>
                            </af:panelTabbed>
                          </f:facet>
                        </af:panelStretchLayout>
                      </f:facet>
                    edit: no need "AFStretchWidth" style for panelTabbed component, in this layout.

                    Edited by: Ayhan Gungor on Mar 23, 2012 2:32 PM
                    • 7. Re: How to make a panelTabbed occupy all the available space?
                      Subramanian Meyyappan
                      yes user10047839      Ayhan Gungor pin point correctly.

                      Edited by: ADF7 on Mar 23, 2012 5:24 AM
                      • 8. Re: How to make a panelTabbed occupy all the available space?
                        user10047839
                        thx, the top facet with topHeight="auto" actually is the solution to my problem