1 Reply Latest reply on Mar 25, 2008 5:39 AM by ronanker

    calendar position

    ronanker

      I've got an issue with rich:calendar that doesn't show at the right place when inside a scrolling div.

      in my page ( see below) i have a list of data with a rich:calendar for each row in a column. when i scroll down and then click on the calendar, it doesn't show where it should. it doesn't take in account the scrollsize...

      my template (simplified):

      <body>
       <div id="entetePage" />
       <div id="milieuPage">
       <div id="navigation" />
       <div id="contenu">
       <div id="menu"/>
       <div id="page"/>
       </div>
       </div>
       <div id="piedPage"/>
      </body>
      

      with this css :
      /* Styles Globaux Standards : */
      html, body {
       margin: 0;
       padding: 0;
       border:0 none;
       overflow: hidden;
       height: 100%;
      }
      
      img {
       border: 0 none;
      }
      div {
       margin: 0;
       padding: 0;
      }
      
      /* Premiere decoupe : */
      .entetePage {
       display: block;
       height: 50px;
       z-index: 10;
      }
      .milieuPage {
       display: block;
       height: 500px;
       z-index: 0;
       }
      .piedPage {
       display: block;
       height: 48px;
       z-index: 10;
      }
      
      /* Seconde decoupe : */
      .navigation{
       display: block;
       height: 38px;
       z-index: 10;
      }
      
      .contenu {
       position: absolute;
       top: 88px;
       /*height: 400px;*/
       z-index: 10;
       }
      
      .hiddenDiv {
       display:none;
      }
      
      /* Decoupe contenu : */
      .menu {
       position: absolute;
       display: none;/* menu cache : none; menu visible : block; */
       background-color: #F8F3F7;
       top: 0px;
       left: 0;
       width: 200px;
       height: 450px;
       z-index: 100;
      }
      .page {
       position: absolute;
       top: 0px;
       left: 0px;/* menu cache : 0px; menu visible : 200px; */
       width: 100%;/* menu cache : 100%; menu visible : 800px; */
       height: 450px;
       z-index: 25;
       overflow: auto;
       }

      menu open or close doesn't matter for the issue.
      javascript making div resize with window size doesn't change the issue.