RichFaces
  1. RichFaces
  2. RF-12349

Calendar component hidden behind rich:accordian component

    Details

    • Type: Bug Bug
    • Status: Open (View Workflow)
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: 4.2.2.Final, 5.0.0.Alpha1
    • Fix Version/s: 4.5-Tracking
    • Labels:
      None
    • Environment:
      OS:- Windows XP, Fedora
      JDK:-JDK 1.6.0_20, JDK 7
      browsers: Chrome, Firefox

    • Affects:
      Interactive Demo/Tutorial
    • Workaround:
      Workaround Exists
    • Workaround Description:
      Hide

      A workaround can be overriding the rf-ac-itm-cnt class as follows:

      <h:outputStylesheet>
              .rf-ac-itm-cnt {
                 overflow: visible;
              }
      </h:outputStylesheet>
      

      Show
      A workaround can be overriding the rf-ac-itm-cnt class as follows: < h :outputStylesheet> .rf-ac-itm-cnt { overflow: visible; } </ h :outputStylesheet>
    • Estimated Difficulty:
      Medium
    • Steps to Reproduce:
      Hide

      Create a <rich:accordion> component with an nested <rich:calendar>, the <rich:calendar> seems to be hidden behind the accordion component.
      Sample Code:-

      <h:form>
         <rich:accordion style="z-index:10;" id="acrdion" switchType="client">
              <rich:accordionItem id="acdItm" header="Overview:">
               <rich:calendar value="#{bean.date}" datePattern="dd/M/yy" 
                          id="Cal1" style="z-index:100;"/>
              </rich:accordionItem>
         </rich:accordion>
      <h:form>
      

      Show
      Create a <rich:accordion> component with an nested <rich:calendar>, the <rich:calendar> seems to be hidden behind the accordion component. Sample Code:- <h:form> <rich:accordion style="z-index:10;" id="acrdion" switchType="client"> <rich:accordionItem id="acdItm" header="Overview:"> <rich:calendar value="#{bean.date}" datePattern="dd/M/yy" id="Cal1" style="z-index:100;"/> </rich:accordionItem> </rich:accordion> <h:form>
    • Bugzilla Update:
      Perform
    • Similar Issues:
      Show 10 results 

      Description

      The calendar component <rich:calendar> is hidden behind the <rich:accordionitem>, wherein the calendar component is included inside one of the accordion Items of the <rich:accordion> component.

        Gliffy Diagrams

          Activity

          Hide
          robertlee1111 robertlee1111 added a comment -

          Is there any update on this item? Anyone working on it?

          Show
          robertlee1111 robertlee1111 added a comment - Is there any update on this item? Anyone working on it?
          Hide
          Brian Leathem added a comment -

          Pavol Pitonak please verify this report.

          Show
          Brian Leathem added a comment - Pavol Pitonak please verify this report.
          Hide
          Juraj Húska added a comment -

          I have simulated the issue on this page.

          IMHO the issue is in the r:accordion. It incorrectly has defined css style property overflow-x to hidden.
          See accordion.ecss.

          Notice that the page is also simulating r:calendar in other similar situations. There it works correctly, as the other panels has overflow set to visible.
          Attaching the workaround.

          Show
          Juraj Húska added a comment - I have simulated the issue on this page. IMHO the issue is in the r:accordion . It incorrectly has defined css style property overflow-x to hidden . See accordion.ecss . Notice that the page is also simulating r:calendar in other similar situations. There it works correctly, as the other panels has overflow set to visible . Attaching the workaround.
          Hide
          Juraj Húska added a comment -

          Note that I have issued grep -r "overflow: hidden;" and similar over framework and listed all container components which can be affected.

          So I tested on:

          • accordion
          • popup panel
          • data table
          • extended data table
          • tab panel
          • collapsible panel

          It works with everything, only with r:accordion not.

          Show
          Juraj Húska added a comment - Note that I have issued grep -r "overflow: hidden;" and similar over framework and listed all container components which can be affected. So I tested on: accordion popup panel data table extended data table tab panel collapsible panel It works with everything, only with r:accordion not.
          Hide
          Brian Leathem added a comment -

          Nice job with the investigations Juraj Húska! And thanks for providing the workaround.

          Show
          Brian Leathem added a comment - Nice job with the investigations Juraj Húska ! And thanks for providing the workaround.

            People

            • Assignee:
              Unassigned
              Reporter:
              Nikhil Hukkerikar
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:

                Development