ICEfaces
  1. ICEfaces
  2. ICE-9616

ace:dataTable - Horizontal scroll issue with header contents that are absolutely positioned

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Minor Minor
          • Resolution: Won't Fix
          • Affects Version/s: EE-3.2.0.GA, EE-3.3.0.GA, EE-3.3.0.GA_P01
          • Fix Version/s: EE-3.3.0.GA_P02, 4.0
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            All
          • Assignee Priority:
            P3
          • Salesforce Case Reference:
          • Workaround Exists:
            Yes
          • Workaround Description:
            Hide
            Workaround 1

            Make relative-positioned the parent of the element that you wish to make absolute-positioned. For example...

            .ui-datatable-scrollable-header table thead tr th div {
            position:relative;
            }

            Workaround 2

            Instead of...

            <span style="position:absolute;">

            The following can be used:

            <span style="display:block; width:150px;">

            This will widen the table column to the specified width. They just have to choose a width that is enough to fit all the text and images they want to include in the column header.
            Show
            Workaround 1 Make relative-positioned the parent of the element that you wish to make absolute-positioned. For example... .ui-datatable-scrollable-header table thead tr th div { position:relative; } Workaround 2 Instead of... <span style="position:absolute;"> The following can be used: <span style="display:block; width:150px;"> This will widen the table column to the specified width. They just have to choose a width that is enough to fit all the text and images they want to include in the column header.

            Description

            The header contents of a column are set to use "position: absolute". This table is also in a container that allows for horizontal scrolling. When scrolling horizontally the absolutely position contents are scrolled along with the scrollbar and not kept in the correct location.

              Activity

              Ascending order - Click to sort in descending order
              Arran Mccullough created issue -
              Arran Mccullough made changes -
              Field Original Value New Value
              Salesforce Case Reference 5007000000W6KXqAAN
              Arran Mccullough made changes -
              Attachment Case12410Example.zip [ 16507 ]
              Ken Fyten made changes -
              Priority Major [ 3 ] Minor [ 4 ]
              Ken Fyten made changes -
              Assignee Arturo Zambrano [ artzambrano ]
              Fix Version/s 3.4 [ 10770 ]
              Fix Version/s EE-3.4.0.GA [ 11171 ]
              Assignee Priority P3 [ 10012 ]
              Arran Mccullough made changes -
              Workaround Description Instead of...

              <span style="position:absolute;">

              The following can be used:

              <span style="display:block; width:150px;">

              This will widen the table column to the specified width. They just have to choose a width that is enough to fit all the text and images they want to include in the column header.
              Workaround Exists Yes [ 10007 ]
              Ken Fyten made changes -
              Fix Version/s EE-3.3.0.GA_P02 [ 11371 ]
              Fix Version/s EE-4.0.0.GA [ 11171 ]
              Ken Fyten made changes -
              Fix Version/s 4.0 [ 11382 ]
              Fix Version/s 4.0.BETA [ 10770 ]
              Arturo Zambrano made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Won't Fix [ 2 ]
              Arturo Zambrano made changes -
              Workaround Description Instead of...

              <span style="position:absolute;">

              The following can be used:

              <span style="display:block; width:150px;">

              This will widen the table column to the specified width. They just have to choose a width that is enough to fit all the text and images they want to include in the column header.               		Workaround 1

              Make relative-positioned the parent of the element that you wish to make absolute-positioned. For example...

              .ui-datatable-scrollable-header table thead tr th div {
              position:relative;
              }

              Workaround 2

              Instead of...

              <span style="position:absolute;">

              The following can be used:

              <span style="display:block; width:150px;">

              This will widen the table column to the specified width. They just have to choose a width that is enough to fit all the text and images they want to include in the column header.
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]

                People

                • Assignee:
                  Arturo Zambrano
                  Reporter:
                  Arran Mccullough
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: