Richfaces rich:calendar part of popup is behind extendedDataTable
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
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
