ICEfaces
  1. ICEfaces
  2. ICE-1964

scrollable datatable columns do not align when cell content length exceeds column length

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Won't Fix
          • Affects Version/s: 1.6
          • Fix Version/s: 1.6.1
          • Component/s: ICE-Components
          • Labels:
            None
          • Environment:
            win xp
          • Workaround Exists:
            Yes
          • Workaround Description:
            Hide

            td span.iceOutTxt{
            color:#000000;
            font-family:Arial,Helvetica,sans-serif;
            padding:2px 0px;
            overflow: hidden;
            display: block;
            }
            Show
            td span.iceOutTxt{ color:#000000; font-family:Arial,Helvetica,sans-serif; padding:2px 0px; overflow: hidden; display: block; }

            Description

            When using a scrollable datatable, if you have non-breaking column content whose length exceeds the specified column length, the cell will grow to fit the content instead of applying the overflow:hidden.

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Adnan Durrani added a comment -

              Suggested fix applied. revision 14685

              Show
              Adnan Durrani added a comment - Suggested fix applied. revision 14685
              Hide
              Permalink
              Adnan Durrani added a comment -

              The last check-in was for the outputText component only. To fix other components the tableRenderer need to be changed and it's "td" has to be rendered its own div with the following style "overflow:hidden". Which potentially increase the contents of the generated HTML so that is why we didn't modified the dataTable renderer.

              For workaround developer can put all of the children inside a panelGroup with the following style "overflow:hidden".

              <ice:column >
              <ice:panelGroup style="overflow:hidden;">
              <ice:commandButton value="#

              {bean.longString}

              "/>
              </ice:panelGroup>
              </ice:column>

              Show
              Adnan Durrani added a comment - The last check-in was for the outputText component only. To fix other components the tableRenderer need to be changed and it's "td" has to be rendered its own div with the following style "overflow:hidden". Which potentially increase the contents of the generated HTML so that is why we didn't modified the dataTable renderer. For workaround developer can put all of the children inside a panelGroup with the following style "overflow:hidden". <ice:column > <ice:panelGroup style="overflow:hidden;"> <ice:commandButton value="# {bean.longString} "/> </ice:panelGroup> </ice:column>
              Hide
              Permalink
              Adnan Durrani added a comment -

              One thing forgot to tell, IE doesn't respect the above style. Other browsers work fine.

              Show
              Adnan Durrani added a comment - One thing forgot to tell, IE doesn't respect the above style. Other browsers work fine.
              Hide
              Permalink
              Ken Fyten added a comment -

              Note that IE has a quirk in that 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
              Ken Fyten added a comment - Note that IE has a quirk in that 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.)

                People

                • Assignee:
                  Unassigned
                  Reporter:
                  Philip Breau
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  0 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: