2 Replies Latest reply on Aug 22, 2011 7:29 AM by Roman Karnes

    Richfaces rich:calendar part of popup is behind extendedDataTable

    Roman Karnes Newbie

      Hello,  I have an issue with rich:calendar.  I have a page with search functionality at the top which on of the input fields is a rich:calendar field and a extended data table in the lower part of the page.  When the calendar popup is active part of the calender is behind the data table..  See attached image

       

      calendar_hidden.JPG

      How do I get it on top of the data table?

       

      Here's my code:

       

      {code}

      <html xmlns="http://www.w3.org/1999/xhtml"

                xmlns:h="http://java.sun.com/jsf/html"

                xmlns:f="http://java.sun.com/jsf/core"

                xmlns:ui="http://java.sun.com/jsf/facelets"

                xmlns:rich="http://richfaces.org/rich"

                xmlns:c="http://java.sun.com/jsp/jstl/core"

                xmlns:a4j="http://richfaces.org/a4j">

       

       

      <ui:composition template="/templates/main.xhtml">

      <ui:define name="body">  

         <h:head/>

            <h:form prependId="false" id="form">

               <h:panelGrid styleClass="searchPanel" border="0" columns="2" width="100%" >

                <rich:panel >

                              <f:facet name="header">

                   <h:outputText value="Manual Pay Assignment Search"></h:outputText>

                  </f:facet>

                  <h:panelGrid columns="4" width="100%">

       

                   <h:outputLabel value="Release Days:" for="idReleaseDays" />

                               <h:inputText id="idReleaseDays" value="#{manualPayAssignment.releaseDays}"/>

                               <h:outputLabel value="Location:" for="idLocations" />

                               <rich:select id="idLocations" value="#{manualPayAssignment.locationId}">

                      <f:selectItems value="#{manualPayDropDowns.locations}"/>

                   </rich:select>

       

                               <h:outputLabel value="Provider Name:" for="idProviderId" />

                               <rich:select id="idProviderId" value="#{manualPayAssignment.providerId}" enableManualInput="true"

                                         defaultLabel="Start typing for select" listWidth="400px">

                      <f:selectItems value="#{manualPayDropDowns.providerNames}"/>

                   </rich:select>

                               <h:outputLabel value="Invoice Type:" for="idInvoiceTypes" />

                   <rich:select id="idInvoiceTypes" value="#{manualPayAssignment.invoiceType}">

                      <f:selectItems value="#{manualPayDropDowns.invoiceTypes}"/>

                   </rich:select>

       

                   <h:outputLabel value="Provider Tin" for="idProviderTin" />

                   <rich:select id="idProviderTin" value="#{manualPayAssignment.providerTin}" enableManualInput="true"

                                         defaultLabel="Start typing for select">

                      <f:selectItems value="#{manualPayDropDowns.providerTins}"/>

                   </rich:select>

                   <h:outputLabel value="Assigned Date:" for="idAssignedDateSearch" />

                               <rich:calendar value="#{manualPayAssignment.assignedDateSearch}" id="idAssignedDateSearch" />

       

                   <h:outputLabel value="Claim Number:" for="idClaimNumber" />

                               <rich:select id="idClaimNumber" value="#{manualPayAssignment.claimId}" enableManualInput="true"

                                         defaultLabel="Start typing for select">

                      <f:selectItems value="#{manualPayDropDowns.claims}"/>

                   </rich:select>

                               <h:outputLabel value="Claim Source:" for="idClaimSource" />

                   <rich:select id="idClaimSource" value="#{manualPayAssignment.claimSourceId}">

                      <f:selectItems value="#{manualPayDropDowns.claimSources}"/>

                   </rich:select>

                   <h:outputLabel value="Assigned To:" for="idAssignedToSearch" />

                               <rich:select id="idAssignedToSearch" value="#{manualPayAssignment.assignedPersonIdSearch}" enableManualInput="true"

                                         defaultLabel="Start typing for select" selectFirst="0">

                      <f:selectItems value="#{manualPayDropDowns.assignedPersons}"/>

                   </rich:select>

       

                               <h:outputText value="" />

                               <h:outputText value="" />

       

                   <h:commandButton action="#{manualPayAssignment.search}" value="Search" type="submit"/>

       

                  </h:panelGrid>

                </rich:panel>

               </h:panelGrid>

               <h:panelGrid styleClass="searchPanel">

               <rich:extendedDataTable value="#{manualPayAssignment.displayList}"

                  var="invoice" selection="#{manualPayAssignment.selection}" id="table"

                      style="height:350px; width:1200px;" selectionMode="multiple" sortMode="multi" styleClass="stable">

                      <a4j:ajax execute="@form"

                                                    event="selectionchange"

                                                    listener="#{manualPayAssignment.selectionListener}" />

       

                  <f:facet name="header">

                      <h:outputText value="Returning 0 Invoices" />

                  </f:facet>

                  <rich:column width="55px" filter="#{manualPayAssignment.daysInFilterImpl}">

                      <f:facet name="header">

                           <h:outputText value="DaysIn"/>

                           <br/>

                           <h:selectOneMenu value="#{manualPayAssignment.daysInFilter}" title="Filter by Day In System">

                             <f:selectItems value="#{manualPayAssignment.daysIn}" />

                             <a4j:ajax render="table" execute="@this" event="change" />

                           </h:selectOneMenu>

                      </f:facet>

                      <h:outputText value="#{invoice.numberOfDays}" />

                  </rich:column>

                  <rich:column width="45px">

                      <f:facet name="header">

                          <h:outputText value="Prrty" title="Priority" />

                      </f:facet>

                      <h:outputText value="#{invoice.numberOfDays}" />

                  </rich:column>

                  <rich:column width="110px">

                      <f:facet name="header">

                          <h:outputText value="Number" />

                      </f:facet>

                      <h:outputText value="#{invoice.invoiceNumber}"  title="#{invoice.invoiceNumber}"/>

                  </rich:column>

                  <rich:column width="65px">

                      <f:facet name="header">

                          <h:outputText value="Received Dte" />

                      </f:facet>

                      <h:outputText value="#{invoice.dateReceived}"/>

                  </rich:column>

                  <rich:column width="85px" filter="#{manualPayAssignment.defaultReleaseFilterImpl}">

                      <f:facet name="header">

                          <h:outputText value="DPR Dte" title="Default Payment Release Date"/>

                          <br/>

                          <h:selectOneMenu value="#{manualPayAssignment.defaultReleaseFilter}"  title="Filter by Default Release Day">

                                  <f:selectItems value="#{manualPayAssignment.defaultReleaseDays}" />

                                  <a4j:ajax render="table" execute="@this" event="change" />

                          </h:selectOneMenu>

                      </f:facet>

                      <h:outputText value="#{invoice.defaultReleaseDate}"/>

                  </rich:column>

                  <rich:column width="65px">

                      <f:facet name="header">

                          <h:outputText value="Approved Dte" />

                      </f:facet>

                      <h:outputText value="#{invoice.dateApproved}" />

                  </rich:column>

                  <rich:column width="162px" filter="#{manualPayAssignment.providerNameFilterImpl}">

                      <f:facet name="header">

                          <h:outputText value="Provider"/>

                          <br/>

                          <h:selectOneMenu value="#{manualPayAssignment.providerNameFilter}" title="Filter by Provider">

                                  <f:selectItems value="#{manualPayAssignment.providerNames}" />

                                  <a4j:ajax render="table" execute="@this" event="change" />

                          </h:selectOneMenu>

                      </f:facet>

                      <h:outputText value="#{invoice.providerName}" title="#{invoice.providerName}"/>

                  </rich:column>

                  <rich:column width="120px" filter="#{manualPayAssignment.claimNumberFilterImpl}" title="Filter by Claim Number Day">

                      <f:facet name="header" >

                          <h:outputText value="Claim Number" />

                          <br/>

                          <h:selectOneMenu value="#{manualPayAssignment.claimNumberFilter}">

                                  <f:selectItems value="#{manualPayAssignment.claimNumbers}" />

                                  <a4j:ajax render="table" execute="@this" event="change" />

                          </h:selectOneMenu>

                      </f:facet>

                      <h:outputText value="#{invoice.claimNumber}" title="#{invoice.claimNumber}"/>

                  </rich:column>

                  <rich:column width="170px" filter="#{manualPayAssignment.insuredNameFilterImpl}">

                      <f:facet name="header">

                          <h:outputText value="Insured Name" />

                          <br/>

                          <h:selectOneMenu value="#{manualPayAssignment.insuredNameFilter}" title="Filter by Insured Name" >

                                  <f:selectItems value="#{manualPayAssignment.insuredNames}" />

                                  <a4j:ajax render="table" execute="@this" event="change" />

                          </h:selectOneMenu>

                      </f:facet>

                      <h:outputText value="#{invoice.insuredName}" title="#{invoice.insuredName}"/>

                  </rich:column>

                  <rich:column width="30px">

                      <f:facet name="header">

                          <h:outputText value="Sys" title="Payment System of Record"/>

                      </f:facet>

                      <h:outputText value="#{invoice.claimSystem}" />

                  </rich:column>

                  <rich:column width="140px">

                      <f:facet name="header">

                          <h:outputText value="Assigned To" />

                      </f:facet>

                      <h:outputText value="#{invoice.claimSystem}"/>

                  </rich:column>

                   <rich:column width="65px">

                      <f:facet name="header">

                          <h:outputText value="Assigned Dte" />

                      </f:facet>

                      <h:outputText value="#{invoice.assignedDate}"/>

                  </rich:column>

                  <rich:column width="65px">

                      <f:facet name="header">

                          <h:outputText value="Net Amount" />

                      </f:facet>

                      <h:outputText value="#{invoice.billAmount}"/>

                  </rich:column>

              </rich:extendedDataTable>

                          <h:commandButton value="Assign">

               <rich:componentControl target="popup" operation="show" />

                    </h:commandButton>

              </h:panelGrid>

              </h:form>

      </ui:define>

      </ui:composition>

      {code}

       

      Thank you

      Roman