Hello Team,
I'm using the Alta UI TabletFirstTemplate everything looks great but when i make the window smaller, the data visualization components overlap each other, this only happens when the window is smaller than the contents it holds.
Can you please advise?
Thanks!
Source code:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:dvt="[http://xmlns.oracle.com/dss/adf/faces](http://xmlns.oracle.com/dss/adf/faces)">
\<af:document title="alta01.jsf" id="d1">
\<af:form id="f1">
\<af:pageTemplate viewId="/oracle/templates/tabletFirstTemplate.jspx" id="pt1">
\<f:facet name="header"/>
\<f:facet name="status"/>
\<f:facet name="appNav"/>
\<f:facet name="globalLinks"/>
\<f:facet name="footer"/>
\<f:facet name="center">
\<af:panelTabbed position="above" id="pt2">
\<af:showDetailItem id="tab1" text="Home" disclosed="true">
\<af:panelGridLayout id="pgl1">
\<af:gridRow marginTop="5px" height="auto" id="gr1">
\<af:gridCell marginStart="5px" width="34%" id="gc1" halign="stretch"
valign="stretch">
\<af:panelBox text="PanelBox1" id="pb1">
\<f:facet name="toolbar"/>
\<dvt:gauge id="guage01" shortDesc="guage dvt" value="#{GuageBean.value}"
minValue="#{GuageBean.minValue}" maxValue="#{GuageBean.maxValue}"
ledStyle="LS\_RECTANGLE" dynamicResize="DYNAMIC\_SIZE">
\<dvt:topLabel text="% of KM Sessions with SRs Logged"
position="LP\_ABOVE\_GAUGE">
\<dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"
italic="false"/>
\</dvt:topLabel>
\<dvt:indicator fillColor="#d3dfeb" borderColor="#FC7DFF"
useThresholdFillColor="true" type="IT\_NEEDLE"/>
\</dvt:gauge>
\</af:panelBox>
\</af:gridCell>
\<af:gridCell marginStart="5px" width="33%" id="gc2" halign="stretch"
valign="stretch">
\<af:panelBox text="PanelBox2" id="pb2">
\<f:facet name="toolbar"/>
\<dvt:gauge id="guage02" shortDesc="guage dvt" value="#{GuageBean.value}"
minValue="#{GuageBean.minValue}" maxValue="#{GuageBean.maxValue}"
ledStyle="LS\_RECTANGLE" dynamicResize="DYNAMIC\_SIZE">
\<dvt:topLabel text="% of KM Sessions with SRs Logged"
position="LP\_ABOVE\_GAUGE">
\<dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"
italic="false"/>
\</dvt:topLabel>
\<dvt:indicator fillColor="#d3dfeb" borderColor="#FC7DFF"
useThresholdFillColor="true" type="IT\_NEEDLE"/>
\</dvt:gauge>
\</af:panelBox>
\</af:gridCell>
\<af:gridCell marginStart="5px" width="33%" marginEnd="5px" id="gc3" halign="stretch"
valign="stretch">
\<af:panelBox text="PanelBox3" id="pb3">
\<f:facet name="toolbar"/>
\<dvt:gauge id="guage03" shortDesc="guage dvt" value="#{GuageBean.value}"
minValue="#{GuageBean.minValue}" maxValue="#{GuageBean.maxValue}"
ledStyle="LS\_RECTANGLE" dynamicResize="DYNAMIC\_SIZE">
\<dvt:topLabel text="% of KM Sessions with SRs Logged"
position="LP\_ABOVE\_GAUGE">
\<dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"
italic="false"/>
\</dvt:topLabel>
\<dvt:indicator fillColor="#d3dfeb" borderColor="#FC7DFF"
useThresholdFillColor="true" type="IT\_NEEDLE"/>
\</dvt:gauge>
\</af:panelBox>
\</af:gridCell>
\</af:gridRow>
\<af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr2">
\<af:gridCell marginStart="5px" width="34%" id="gc4" halign="stretch"
valign="stretch">
\<af:panelBox text="PanelBox4" id="pb4">
\<f:facet name="toolbar"/>
\<dvt:gauge id="guage04" shortDesc="guage dvt" value="#{GuageBean.value}"
minValue="#{GuageBean.minValue}" maxValue="#{GuageBean.maxValue}"
ledStyle="LS\_RECTANGLE" dynamicResize="DYNAMIC\_SIZE">
\<dvt:topLabel text="% of KM Sessions with SRs Logged"
position="LP\_ABOVE\_GAUGE">
\<dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"
italic="false"/>
\</dvt:topLabel>
\<dvt:indicator fillColor="#d3dfeb" borderColor="#FC7DFF"
useThresholdFillColor="true" type="IT\_NEEDLE"/>
\</dvt:gauge>
\</af:panelBox>
\</af:gridCell>
\<af:gridCell marginStart="5px" width="33%" id="gc5" halign="stretch"
valign="stretch">
\<af:panelBox text="PanelBox5" id="pb5">
\<f:facet name="toolbar"/>
\<dvt:gauge id="guage05" shortDesc="guage dvt" value="#{GuageBean.value}"
minValue="#{GuageBean.minValue}" maxValue="#{GuageBean.maxValue}"
ledStyle="LS\_RECTANGLE" dynamicResize="DYNAMIC\_SIZE">
\<dvt:topLabel text="% of KM Sessions with SRs Logged"
position="LP\_ABOVE\_GAUGE">
\<dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"
italic="false"/>
\</dvt:topLabel>
\<dvt:indicator fillColor="#d3dfeb" borderColor="#FC7DFF"
useThresholdFillColor="true" type="IT\_NEEDLE"/>
\</dvt:gauge>
\</af:panelBox>
\</af:gridCell>
\<af:gridCell marginStart="5px" width="33%" marginEnd="5px" id="gc6" halign="stretch"
valign="stretch">
\<af:panelBox text="PanelBox6" id="pb6">
\<f:facet name="toolbar"/>
\<dvt:gauge id="guage06" shortDesc="guage dvt" value="#{GuageBean.value}"
minValue="#{GuageBean.minValue}" maxValue="#{GuageBean.maxValue}"
ledStyle="LS\_RECTANGLE" dynamicResize="DYNAMIC\_SIZE">
\<dvt:topLabel text="% of KM Sessions with SRs Logged"
position="LP\_ABOVE\_GAUGE">
\<dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"
italic="false"/>
\</dvt:topLabel>
\<dvt:indicator fillColor="#d3dfeb" borderColor="#FC7DFF"
useThresholdFillColor="true" type="IT\_NEEDLE"/>
\</dvt:gauge>
\</af:panelBox>
\</af:gridCell>
\</af:gridRow>
\</af:panelGridLayout>
\</af:showDetailItem>
\<af:showDetailItem id="tab2" text="Overview"/>
\<af:showDetailItem id="tab3" text="Historical"/>
\<af:showDetailItem id="tab4" text="Projections"/>
\</af:panelTabbed>
\</f:facet>
\<f:facet name="start"/>
\<f:facet name="end"/>
\<f:attribute name="endWidth" value="2px"/>
\<f:attribute name="startWidth" value="2px"/>
\</af:pageTemplate>
\</af:form>
\</af:document>
</f:view>