2 Replies Latest reply on Jun 14, 2008 6:32 AM by rahul_maha

    Help !! RIchFaces ComboBox position in FF not corect when us

    rahul_maha

      RIchFaces ComboBox position in FF not correct when used in Facelets nested templates.

      When combo box opens, the options are not aligning with combo box in fire fox(2.0.0.14), but this is fine in IE 6.x.

      Also if comboBox is used in plan/simple file it is fine in FFox even.

      This is the step1.xhtml

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:webuijsf="http://www.sun.com/webui/webuijsf"
       xmlns:rich="http://richfaces.org/rich" template="/templates/scenarioTemplate/scenarioTemplate.xhtml">
      
       <ui:define name="Wizard">
       <ui:param name="nextValue" value="Step2"/>
       <div align="center">
       <table border="0" width="650" height="490">
       <tr>
       <td height="100" width="72"><h:outputText value="Year"/></td>
       <td height="100" width="153">
       <rich:comboBox defaultLabel="Enter some value">
       <f:selectItems value="#{FPScenarioManagement.yearListForGui}"/>
       </rich:comboBox>
       </td>
       <td height="100" width="182">
       <h:outputText value="Response curve option"/>
       </td>
       <td height="100" >
       <rich:comboBox defaultLabel="Enter some value">
       <f:selectItem itemValue="After Future View"/>
       <f:selectItem itemValue="Before Future View"/>
       </rich:comboBox>
       <h:selectOneListbox/>
       </td>
       </tr>
      
       <tr>
       <td height="185" width="650" colspan="4">
       <rich:listShuttle sourceValue="#{FPScenarioManagement.dimensionList}" targetValue="#{FPScenarioManagement.dimensionList}" var="item" listHeight="300" listWidth="300" sourceCaptionLabel="Available Items" targetCaptionLabel="Currently Active Items">
       <h:column>
       <f:facet name="header">
       <h:outputText value="Dimension Names" />
       </f:facet>
       <h:outputText value="#{item.dimensionName}" />
       </h:column>
       </rich:listShuttle>
       </td>
       </tr>
      
       <tr>
       <td height="85" width="163">
       <h:outputText value="Selected Dimensions"/>
       </td>
       <td height="85" width="163">
       <rich:comboBox>
       </rich:comboBox>
       </td>
       <td height="85" width="162"></td>
       <td height="85" width="162"></td>
       </tr>
      
       <tr>
       <td height="218" width="650" colspan="4">
       <rich:pickList>
       <f:selectItem itemLabel="Option 1" itemValue="1"/>
       <f:selectItem itemLabel="Option 2" itemValue="2"/>
       <f:selectItem itemLabel="Option 3" itemValue="3"/>
       <f:selectItem itemLabel="Option 4" itemValue="4"/>
       <f:selectItem itemLabel="Option 5" itemValue="5"/>
       </rich:pickList>
       </td>
       </tr>
       </table>
       </div>
      
      
       </ui:define>
      </ui:composition>


      This file uses template

      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html">
      
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <link href="./css/default.css" rel="stylesheet" type="text/css" />
       <link href="./css/tableLayout.css" rel="stylesheet" type="text/css" />
       <title>Facelets Template</title>
       </head>
      
       <body>
       <table cellspacing="10px">
       <tr>
       <td id="Wizard">
       <ui:insert name="Wizard">Content</ui:insert>
       </td>
       </tr>
       <tr>
       <td>
       <rich:spacer width="800"/>
       <h:commandButton action="previous" value="Previous <<" immediate="true"/>
       <h:commandButton action="next" value="Next >>" immediate="true"/>
       </td>
       </tr>
       </table>
       </body>
      
      </html>
      


        • 1. Re: Help !! RIchFaces ComboBox position in FF not corect whe
          rahul_maha

           

          "rahul_maha" wrote:
          RIchFaces ComboBox position in FF not correct when used in Facelets nested templates. The page using it is in a tab panel.

          When combo box opens, the options are not aligning with combo box in fire fox(2.0.0.14), but this is fine in IE 6.x.

          Also if comboBox is used in plan/simple file it is fine in FFox even.

          This is the step1.xhtml

          <ui:composition xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:h="http://java.sun.com/jsf/html"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:a4j="http://richfaces.org/a4j"
           xmlns:webuijsf="http://www.sun.com/webui/webuijsf"
           xmlns:rich="http://richfaces.org/rich" template="/templates/scenarioTemplate/scenarioTemplate.xhtml">
          
           <ui:define name="Wizard">
           <ui:param name="nextValue" value="Step2"/>
           <div align="center">
           <table border="0" width="650" height="490">
           <tr>
           <td height="100" width="72"><h:outputText value="Year"/></td>
           <td height="100" width="153">
           <rich:comboBox defaultLabel="Enter some value">
           <f:selectItems value="#{FPScenarioManagement.yearListForGui}"/>
           </rich:comboBox>
           </td>
           <td height="100" width="182">
           <h:outputText value="Response curve option"/>
           </td>
           <td height="100" >
           <rich:comboBox defaultLabel="Enter some value">
           <f:selectItem itemValue="After Future View"/>
           <f:selectItem itemValue="Before Future View"/>
           </rich:comboBox>
           <h:selectOneListbox/>
           </td>
           </tr>
          
           <tr>
           <td height="185" width="650" colspan="4">
           <rich:listShuttle sourceValue="#{FPScenarioManagement.dimensionList}" targetValue="#{FPScenarioManagement.dimensionList}" var="item" listHeight="300" listWidth="300" sourceCaptionLabel="Available Items" targetCaptionLabel="Currently Active Items">
           <h:column>
           <f:facet name="header">
           <h:outputText value="Dimension Names" />
           </f:facet>
           <h:outputText value="#{item.dimensionName}" />
           </h:column>
           </rich:listShuttle>
           </td>
           </tr>
          
           <tr>
           <td height="85" width="163">
           <h:outputText value="Selected Dimensions"/>
           </td>
           <td height="85" width="163">
           <rich:comboBox>
           </rich:comboBox>
           </td>
           <td height="85" width="162"></td>
           <td height="85" width="162"></td>
           </tr>
          
           <tr>
           <td height="218" width="650" colspan="4">
           <rich:pickList>
           <f:selectItem itemLabel="Option 1" itemValue="1"/>
           <f:selectItem itemLabel="Option 2" itemValue="2"/>
           <f:selectItem itemLabel="Option 3" itemValue="3"/>
           <f:selectItem itemLabel="Option 4" itemValue="4"/>
           <f:selectItem itemLabel="Option 5" itemValue="5"/>
           </rich:pickList>
           </td>
           </tr>
           </table>
           </div>
          
          
           </ui:define>
          </ui:composition>


          This file uses template

          
          <html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:a4j="http://richfaces.org/a4j"
           xmlns:rich="http://richfaces.org/rich"
          xmlns:h="http://java.sun.com/jsf/html">
          
           <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <link href="./css/default.css" rel="stylesheet" type="text/css" />
           <link href="./css/tableLayout.css" rel="stylesheet" type="text/css" />
           <title>Facelets Template</title>
           </head>
          
           <body>
           <table cellspacing="10px">
           <tr>
           <td id="Wizard">
           <ui:insert name="Wizard">Content</ui:insert>
           </td>
           </tr>
           <tr>
           <td>
           <rich:spacer width="800"/>
           <h:commandButton action="previous" value="Previous <<" immediate="true"/>
           <h:commandButton action="next" value="Next >>" immediate="true"/>
           </td>
           </tr>
           </table>
           </body>
          
          </html>
          

          The top most page step1 is called from a page having tab panel

          
          <?xml version='1.0' encoding='UTF-8' ?>
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
          
          <html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:h="http://java.sun.com/jsf/html"
           xmlns:a4j="http://richfaces.org/a4j"
           xmlns:rich="http://richfaces.org/rich"
           xmlns:f="http://java.sun.com/jsf/core">
           <body>
          
           <ui:composition template="/templates/global/solomonGlobalTemplate.xhtml">
           <ui:define name="content">
           <rich:tabPanel switchType="client">
           <rich:tab label="Create new scenario">
           <h:panelGrid width="100%" columns="2" columnClasses="col1,col2">
           <rich:panel styleClass="wizard">
           <f:facet name="header">
           <h:outputText value="Using a4j:include for Wizard-like behaviour" />
           </f:facet>
           <h:form>
           <a4j:include viewId="/Step1.xhtml"/>
           </h:form>
           </rich:panel>
           </h:panelGrid>
          
           </rich:tab>
           <rich:tab label="Choose an existing secenario">
           Here is tab #2
           </rich:tab>
           </rich:tabPanel>
           </ui:define>
           </ui:composition>
           </body>
          </html>
          
          




          • 2. Re: Help !! RIchFaces ComboBox position in FF not corect whe
            rahul_maha

            Ha Ha problem solved - It is because the page is nested in multiple templates and body tag of each template was creating the problem.

            So make sure no extra body tags.