ICEfaces
  1. ICEfaces
  2. ICE-11409

Popup ice:selectInputDate inside a scrollable container displays calendar at wrong position

    Details

    • Type: Bug Bug
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Won't Fix
    • Affects Version/s: EE-3.3.0.GA_P05
    • Fix Version/s: None
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Any

      Description

      When there's a popup ice:selectInputDate component inside a scrollable container, such as a data table, and the button is activated to display the calendar, the calendar is displayed at a wrong position when the scroll position is not 0 in either dimension. It seems like the calculations to display the calendar don't take into account the scroll offset.
      1. basicTable.xhtml
        9 kB
        Arturo Zambrano
      2. basicTable.xhtml
        9 kB
        Arturo Zambrano
      3. basicTable.xhtml
        9 kB
        Arturo Zambrano

        Activity

        Hide
        Arturo Zambrano added a comment -

        There's no need to fix anything. The calendar can be displayed at the right position (above or below the input field) by making the scrollable container positioned. This means adding 'position:relative;' to the same container that was made scrollable.

        Attaching the test case with this addition to illustrate the solution.

        Show
        Arturo Zambrano added a comment - There's no need to fix anything. The calendar can be displayed at the right position (above or below the input field) by making the scrollable container positioned. This means adding 'position:relative;' to the same container that was made scrollable. Attaching the test case with this addition to illustrate the solution.
        Hide
        Arturo Zambrano added a comment -

        I'm attaching an improved solution for their test case, in order to make sure that the calendar popup is not concealed by the positioned parent div.

        The solution consists in not having a single div with both the relative position styling and the overflow styling. So, a new div parent was introduced, so that it contains only the positioned styling, and it's immediate child div contains the overflow and width styling. The only change is this div, at line 45, and it's respective closing tag.

        Show
        Arturo Zambrano added a comment - I'm attaching an improved solution for their test case, in order to make sure that the calendar popup is not concealed by the positioned parent div. The solution consists in not having a single div with both the relative position styling and the overflow styling. So, a new div parent was introduced, so that it contains only the positioned styling, and it's immediate child div contains the overflow and width styling. The only change is this div, at line 45, and it's respective closing tag.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: