3 Replies Latest reply on Aug 30, 2011 10:14 AM by hhcofcmds

    rich:calendar zindex issue

    cbax007 Oct 18, 2007 5:25 PM

      I have noticed that when I have a rich:calendar and then I have a rich:tabPanel under the calendar that I can't get the calendar to show up in front of the tabPanel, it always shows up behind it. I even tried giving the calendar a zindex="2000" and it still doesn't work. I have included the page source below. Any help would be appreciated.

      <html xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
 xmlns:c="http://java.sun.com/jstl/core">
<h:form id="Form">
 <rich:panel header="Search Parameters">
 <h:panelGroup id="ParamsPanel">
 <table>
 <tr>
 <td>
 <table>
 <tr>
 <td align="right">Valid From:</td>
 <td align="left"><rich:calendar popup="true"
 datePattern="MM/dd/yyyy" id="StartDate" zindex="2000"
 enableManualInput="true" /></td>
 </tr>
 </table>
 <rich:spacer height="10" /></td>
 </tr>
 <tr>
 <td><h:panelGroup id="TabArea">
 <table width="750">
 <tr>
 <td><rich:tabPanel switchType="ajax">
 <rich:tab label="Tab 1">
 This is tab 1
 </rich:tab>
 <rich:tab label="Tab 2">
 This is tab 2
 </rich:tab>
 <rich:tab label="Tab 3">
 This is tab 3
 </rich:tab>
 </rich:tabPanel></td>
 </tr>
 </table>
 </h:panelGroup> <rich:spacer height="10" /></td>
 </tr>
 </table>
 </h:panelGroup>
 </rich:panel>
</h:form>
</html>


      • 7973 Views
      • Tags:
        • 1. Re: rich:calendar zindex issue
          ilya_shaikovsky
          ilya_shaikovsky Oct 22, 2007 8:40 AM (in response to cbax007)

          Try 3.1.2 GA, Should works fine,

            • Actions
          • 2. Re: rich:calendar zindex issue
            hrast200
            hrast200 Sep 4, 2008 2:41 AM (in response to cbax007)

            In IE7 doesn't work (rich 3.2.1 GA).

              • Actions
            • 3. Re: rich:calendar zindex issue
              hhcofcmds
              hhcofcmds Aug 30, 2011 10:14 AM (in response to cbax007)

              In html, if you have a case like this:

              <table style="position: absolute; z-index: 3"> .. </table>

              <div style="position: relative">...</div>

              Then the table will cover the div.

              However, in IE7, if you have this:

              <div style="position: relative"> ... <table style="position: absolute; z-index: 3">...</table></div>

              <div style="position: relative">...</div>

              then the z-index of the table will be ignored, and the table will appear behind the latter div. You have to specify a z-index of at least 3 to the containing relative div as well.

              I don't know how it works with rich:panel and rich:tabPanel, but I hope this will help.

                • Actions