1 Reply Latest reply on Dec 17, 2009 6:21 AM by ilya_shaikovsky

    How to overlap rich:calendar over other elements?

      Hi,

       

      I have tried overlapping rich:calendar over a table using z-index (in .css and 'zindex' attribute of rich:calendar). But this does not work.

      Can you please suggest how this needs to be done?

       

      Snippet of my code:

       

      <style>

      .rich-calendar-exterior {
      z-index:10000;
      }
      </style>

       

      <rich:scrollableDataTable style="height:300px;width:600px;">
           <rich:calendar />

           <a4j:outputPanel id="abcPanel">
                <rich:calendar id="abc" zindex="1000" />
           </a4j:outputPanel>

      </rich:scrollableDataTable>

       

       

      Thanks,

      AM

        • 1. Re: How to overlap rich:calendar over other elements?
          ilya_shaikovsky

          I'm afraid this problem could be only workarounded by moving calendar out of the table and working through js api as described there Shared Calendar Article.

           

          The only problem that we made some changes in calendar so it's needed at least to add

                if (!this.isRendered) {

                     this.isRendered = true;

                     this.render();

          to the customExpand method to the very beggining.

           

          and page definition should be for example like this:

                    <rich:calendar id="calendar"

                    onchanged="#{rich:component('calendar')}.customInput.value=event.rich.component.getSelectedDateString();" zindex="1000"/>

           

          I checked that and it works fine for me just some styling should be corrected