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

        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.
        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

          People

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

            Dates

            • Created:
              Updated:
              Resolved: