ICEfaces
  1. ICEfaces
  2. ICE-2417

Scrollable dataTable scrollbars have gaps on left side

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Trivial Trivial
          • Resolution: Fixed
          • Affects Version/s: 1.6
          • Fix Version/s: 1.7Beta1, 1.7
          • Component/s: ICE-Components
          • Labels:
            None
          • Environment:
            All browsers, both XP and Royale themes

            Description

            When using the ice:dataTable with "scrollable=true" the displayed region for the scrollbars on the right-side of the dataTable has a very visible whitespace gap between the right edge of the last dataTable column and the vertical scrollbar. The gap wider on XP theme than Royale, but exists in both.

            Testing shows the gap appears the same on all tested browsers.
            1. Picture 1.png
              16 kB
            2. screenshot-1.jpg
              172 kB
            3. screenshot-2.jpg
              173 kB
            4. screenshot-3.jpg
              163 kB
            5. screenshot-4.jpg
              167 kB

              Activity

              Descending order - Click to sort in ascending order
              Hide
              Permalink
              yip.ng added a comment -

              Note that IE has a quirk (nothing to do with the current issue): It doesn't seem to honor the width and overflow:hidden CSS settings for a <td> when the contents are wider than the <td> width. Therefore in such a case you need to wrap the contents within a <div> (i.e. <ice:panelGroup>):

              <ice:column>
              <ice:panelGroup style="width:160px;overflow:hidden;">
              ......
              </ice:panelGroup>
              </ice:column>

              See the change in component-showcase\web\inc\components\table.jspx. (Do a diff. with prev. version.)

              Show
              yip.ng added a comment - Note that IE has a quirk (nothing to do with the current issue): It doesn't seem to honor the width and overflow:hidden CSS settings for a <td> when the contents are wider than the <td> width. Therefore in such a case you need to wrap the contents within a <div> (i.e. <ice:panelGroup>): <ice:column> <ice:panelGroup style="width:160px;overflow:hidden;"> ...... </ice:panelGroup> </ice:column> See the change in component-showcase\web\inc\components\table.jspx. (Do a diff. with prev. version.)
              Hide
              Permalink
              yip.ng added a comment -

              Screenshots of testing the fix.

              Show
              yip.ng added a comment - Screenshots of testing the fix.
              Hide
              Permalink
              Rod Dunne added a comment -

              I get the same behaviour but only with multi-column tables.

              Show
              Rod Dunne added a comment - I get the same behaviour but only with multi-column tables.
              Hide
              Permalink
              Ken Fyten added a comment -

              Screenshot showing the gap.

              Show
              Ken Fyten added a comment - Screenshot showing the gap.

                People

                • Assignee:
                  Unassigned
                  Reporter:
                  Ken Fyten
                • Votes:
                  2 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: