ICEfaces
  1. ICEfaces
  2. ICE-11233

ace:dataTable - Support growing table width to when user resizes columns

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-4.1.0.GA, EE-3.3.0.GA_P04, 4.2.BETA
    • Fix Version/s: EE-4.2.0.GA, EE-3.3.0.GA_P05
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      All

      Description

      If an ace:dataTable has many columns so much that it is displayed outside of the browser view able area, it isn't possible to resize the columns. If the browser is moved to a larger monitor where all columns are visible, and has room to grow/reduce it is possible to resize.

      This may be a limitation of the resize dataTable code but this JIRA can confirm if this is the case or not.

        Activity

        Arran Mccullough created issue -
        Hide
        Arran Mccullough added a comment -

        Attached test case.

        Steps:

        • Load welcomeICEfaces.jsf in a browser where the table is displayed outside of the browser view.
        • Try to resize the columns and it isn't possible.
        Show
        Arran Mccullough added a comment - Attached test case. Steps: Load welcomeICEfaces.jsf in a browser where the table is displayed outside of the browser view. Try to resize the columns and it isn't possible.
        Arran Mccullough made changes -
        Field Original Value New Value
        Attachment Case14025Example2.war [ 22445 ]
        Attachment Case14025Example2.zip [ 22446 ]
        Ken Fyten made changes -
        Assignee Arturo Zambrano [ artzambrano ]
        Fix Version/s EE-4.2.0.GA [ 13071 ]
        Fix Version/s EE-3.3.0.GA_P05 [ 13082 ]
        Assignee Priority P1 [ 10010 ]
        Hide
        Arturo Zambrano added a comment -

        This is actually a limitation in HTML. Table column widths can't be narrower than the width necessary to display the column contents. Resizing columns works by increasing or decreasing the width of a column by explicitly setting the style attribute of the corresponding <th> element to the desired width. The browser then automatically resizes other columns to fit the column resized by the user. This is done without modifying the total width of the table. So, if a given column is made wider by the user, and all other columns can't be made narrower, because otherwise they couldn't display their contents, then no actual resizing will occur. When a table has too many columns that the viewport width isn't enough, then no column can be made narrower because all columns are already at their minimum width. Likewise, no column can be made wider, because the other columns can't be made narrower.

        This can be easily seen on the following test page. Just try to set style="width: 1px;" on any of the <th> elements. The column won't go below certain width.
        https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro

        Even if an ace:dataTable component has fewer columns, if you try to resize any column, you will see that it can't be made wider than certain limit nor narrower than certain other limit.

        The only thing that maybe could be done in these cases for making columns wider, is to also increase the width of the entire table to accommodate for this extra width. The problem is that it's not easy to detect when all the columns have reached their minimum width as set by the browsers specifically to fit the contents of such columns.

        The other option is to introduce a different resizing mode to always increase or decrease the total table width when a column is resized and make this configurable. This could be specifically set for tables that have too many columns.

        Show
        Arturo Zambrano added a comment - This is actually a limitation in HTML. Table column widths can't be narrower than the width necessary to display the column contents. Resizing columns works by increasing or decreasing the width of a column by explicitly setting the style attribute of the corresponding <th> element to the desired width. The browser then automatically resizes other columns to fit the column resized by the user. This is done without modifying the total width of the table. So, if a given column is made wider by the user, and all other columns can't be made narrower, because otherwise they couldn't display their contents, then no actual resizing will occur. When a table has too many columns that the viewport width isn't enough, then no column can be made narrower because all columns are already at their minimum width. Likewise, no column can be made wider, because the other columns can't be made narrower. This can be easily seen on the following test page. Just try to set style="width: 1px;" on any of the <th> elements. The column won't go below certain width. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro Even if an ace:dataTable component has fewer columns, if you try to resize any column, you will see that it can't be made wider than certain limit nor narrower than certain other limit. The only thing that maybe could be done in these cases for making columns wider, is to also increase the width of the entire table to accommodate for this extra width. The problem is that it's not easy to detect when all the columns have reached their minimum width as set by the browsers specifically to fit the contents of such columns. The other option is to introduce a different resizing mode to always increase or decrease the total table width when a column is resized and make this configurable. This could be specifically set for tables that have too many columns.
        Hide
        Arturo Zambrano added a comment -

        r51374: added 'allowTableResizing' attribute to allow columns to increase in width when trying to resize them and there's no available table width to fit it
        r51375: committed fix to the 3.3 EE maintenance branch

        Show
        Arturo Zambrano added a comment - r51374: added 'allowTableResizing' attribute to allow columns to increase in width when trying to resize them and there's no available table width to fit it r51375: committed fix to the 3.3 EE maintenance branch
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #51374 Thu Mar 23 12:18:30 MDT 2017 art.zambrano ICE-11233 added 'allowTableResizing' attribute to allow columns to increase in width when trying to resize them and there's no available table width to fit it
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/datatable/datatable.js
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableMeta.java
        Ken Fyten made changes -
        Issue Type Bug [ 1 ] Improvement [ 4 ]
        Ken Fyten made changes -
        Summary ace:dataTable - Can't resize columns for multi (10+) column table ace:dataTable - Support growing table width to when user resizes columns
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

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

            Dates

            • Created:
              Updated:
              Resolved: