RichFaces
  1. RichFaces
  2. RF-12349

Calendar component hidden behind rich:accordian component

    Details

    • Type: Bug Bug
    • Status: Open Open (View Workflow)
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: 4.2.2.Final, 5.0.0.Alpha1
    • Fix Version/s: 5-Tracking
    • Security Level: Public (Everyone can see)
    • 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.

        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: