Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-12592

rich:contextMenu clipped by rich:extendedDataTable cells.

    Details

    • Type: Bug
    • Status: Resolved (View Workflow)
    • Priority: Major
    • Resolution: Duplicate Issue
    • Affects Version/s: 4.2.2.Final
    • Fix Version/s: None
    • Component/s: None
    • Labels:
      None
    • Environment:

      browsers: Chrome, Firefox
      application container: EAP 6

    • Steps to Reproduce:
      Hide

      Attached test page dataTable.xhtml

      Show
      Attached test page dataTable.xhtml
    • Workaround:
      Workaround Exists
    • Workaround Description:
      Hide

      Workaround 1:

      A work around is to set the following css rule:

      .rf-edt-c {
          overflow: visible;
      }
      

      To use this workaround, make sure this css rule is included after the extendedDataTable css file. The recommended way to do this is to define this css using an h:outputStyleSheet placed as the very last element in your page.

      Advantage: you can tailor the contextMenu to each table row value.

      Dis-advantage: you create many componentMenu components, creating a larger component tree, and poorer performance.


      Workaround 2:

      An alternative workaround is to not embed the contextMenu directly in the table column, but rather to create a top-level contextMenu component and attach it to the extendedData table, as in:

      <rich:contextMenu target="table" mode="ajax">
          <rich:menuItem label="View" render="popupContent" oncomplete="#{rich:component('popup')}.show();" mode="ajax" icon="/images/icons/open.gif"/>
      </rich:contextMenu>
      

      This is as demonstrated in the richfaces showcase.

      Advantage: you create only a single component element, instead of one component for each table row yielding a smaller component tree, and better performance.

      Dis-advantage: you cannot tailor the contextMenu to the data in each row until macro-substitution (RF-11842) is supported by the RF 4 contextMenu.

      Show
      Workaround 1: A work around is to set the following css rule: .rf-edt-c { overflow: visible; } To use this workaround, make sure this css rule is included after the extendedDataTable css file. The recommended way to do this is to define this css using an h:outputStyleSheet placed as the very last element in your page. Advantage : you can tailor the contextMenu to each table row value. Dis-advantage : you create many componentMenu components, creating a larger component tree, and poorer performance. Workaround 2: An alternative workaround is to not embed the contextMenu directly in the table column, but rather to create a top-level contextMenu component and attach it to the extendedData table, as in: <rich:contextMenu target= "table" mode= "ajax" > <rich:menuItem label= "View" render= "popupContent" oncomplete= "#{rich:component( 'popup' )}.show();" mode= "ajax" icon= "/images/icons/open.gif" /> </rich:contextMenu> This is as demonstrated in the richfaces showcase . Advantage : you create only a single component element, instead of one component for each table row yielding a smaller component tree, and better performance. Dis-advantage : you cannot tailor the contextMenu to the data in each row until macro-substitution ( RF-11842 ) is supported by the RF 4 contextMenu .

      Description

      The context menu gets clipped by extendedDataTable cells. The same code works fine with RF3 (see the attached screenshots and test page). The context menu is correctly displayed if extendedDataTable is replaced with dataTable (attached dataTable.png).

        Gliffy Diagrams

          Attachments

          1. brokenContextMenu.png
            brokenContextMenu.png
            16 kB
          2. dataTable.png
            dataTable.png
            66 kB
          3. dataTable.xhtml
            1 kB
          4. extendedDataTable.png
            extendedDataTable.png
            64 kB

            Issue Links

              Activity

                People

                • Assignee:
                  bleathem Brian Leathem
                  Reporter:
                  ivassile Ilia Vassilev
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  4 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: