This discussion is archived
8 Replies Latest reply: Mar 23, 2012 6:16 AM by user10047839 RSS

How to make a panelTabbed occupy all the available space?

user10047839 Newbie
Currently Being Moderated
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?
    AyhanGungor Newbie
    Currently Being Moderated
    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 Expert
    Currently Being Moderated
    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?
    AyhanGungor Newbie
    Currently Being Moderated
    attention to PanelBox and PanelTabbed order
  • 4. Re: How to make a panelTabbed occupy all the available space?
    user10047839 Newbie
    Currently Being Moderated
    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 Expert
    Currently Being Moderated
    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?
    AyhanGungor Newbie
    Currently Being Moderated
    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 Expert
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    thx, the top facet with topHeight="auto" actually is the solution to my problem

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points