ICEmobile
  1. ICEmobile
  2. MOBI-1176

mobi:tabSet not resizing when using ace:dataTable

    Details

    • Type: Bug Bug
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-1.3.1.GA_P05
    • Fix Version/s: EE-1.3.1.GA_P07
    • Component/s: Faces
    • Labels:
      None
    • Environment:
      mobi with ace

      Description

      See attached test sample.
      note that the size of the dataTable can vary, but the dataTable does not update the size dynamically..hoping it's the test case,
      Main concern is the sizing of the tabSet itself. Since the dataTable size is not available when the tabSet is initialized, the size does not reflect it. Test opens first in the pane1 and that is the size of the tabPane contents even after the tab changes. perhaps a resize should occur when tab changes?

        Activity

        Hide
        Judy Guglielmin added a comment -

        jars to be added to this project are
        icefaces-ee-3.3.0_P05.jar (or current maintenance)
        icefaces-ee-ace-3.3.0_P05(or current maintenance)
        icefaces-ee-mobi-1.3.1_P05(or current maintenance)
        javax.faces.jar
        jstl.jar

        Show
        Judy Guglielmin added a comment - jars to be added to this project are icefaces-ee-3.3.0_P05.jar (or current maintenance) icefaces-ee-ace-3.3.0_P05(or current maintenance) icefaces-ee-mobi-1.3.1_P05(or current maintenance) javax.faces.jar jstl.jar
        Hide
        Arturo Zambrano added a comment -

        Simply setting autoHeight="true" resizes the tab bodies to fit their contents.

        Show
        Arturo Zambrano added a comment - Simply setting autoHeight="true" resizes the tab bodies to fit their contents.
        Hide
        Judy Guglielmin added a comment -

        alternate test case when dataTable is wider than tabSet.

        Show
        Judy Guglielmin added a comment - alternate test case when dataTable is wider than tabSet.
        Hide
        Arturo Zambrano added a comment -

        I tried to add the code to resize the scrollable tables inside mobi:tabSet, but I couldn't reproduce the horizontal alignment issue, despite my test case having different header columns and body columns sizes.

        Another reason why this can't be done is that in ICEfaces 3.3 there is not ice.ace.instance() to get a component object by specifying a client id. In 3.3 we need to know the name of the widgetVar, and that's not possible to do from the mobi:tabSet code.

        Show
        Arturo Zambrano added a comment - I tried to add the code to resize the scrollable tables inside mobi:tabSet, but I couldn't reproduce the horizontal alignment issue, despite my test case having different header columns and body columns sizes. Another reason why this can't be done is that in ICEfaces 3.3 there is not ice.ace.instance() to get a component object by specifying a client id. In 3.3 we need to know the name of the widgetVar, and that's not possible to do from the mobi:tabSet code.
        Hide
        Arturo Zambrano added a comment -

        The only possible workaround for this issue, as there are no listeners for this component is to add some javascript to call resizeScrolling() on the table. The code for this test case looks like this:

        <script>
        var tabContainingTable = document.getElementById('contentForm:test1tab_1');
        tabContainingTable.addEventListener("click", function(){
            setTimeout(function() {window['widget_contentForm_table'].resizeScrolling(); }, 100);
        }); 
        </script>
        

        However, in my testing, the widgetVar couldn't be found and produced an error, even though it was clearly initialized when the page was loaded.

        Show
        Arturo Zambrano added a comment - The only possible workaround for this issue, as there are no listeners for this component is to add some javascript to call resizeScrolling() on the table. The code for this test case looks like this: <script> var tabContainingTable = document.getElementById('contentForm:test1tab_1'); tabContainingTable.addEventListener( "click" , function(){ setTimeout(function() {window['widget_contentForm_table'].resizeScrolling(); }, 100); }); </script> However, in my testing, the widgetVar couldn't be found and produced an error, even though it was clearly initialized when the page was loaded.
        Hide
        Arturo Zambrano added a comment -

        A better workaround would be to add the following code on the page:

        <script>
        var tabContainingTable = document.getElementById('contentForm:test1tab_1');
        tabContainingTable.addEventListener("click", function(){
            setTimeout(function() {window.ice.ace.DataTables['contentForm:table'].resizeScrolling(); }, 1000);
        }); 
        </script>
        

        This is like a built-in ice.ace.instance() functionality in the ace:dataTable component, so it's possible to get data table instances by id that are registered in the object window.ice.ace.DataTables. The delay is actually necessary to be long, otherwise there will be and object not found error.

        Show
        Arturo Zambrano added a comment - A better workaround would be to add the following code on the page: <script> var tabContainingTable = document.getElementById('contentForm:test1tab_1'); tabContainingTable.addEventListener( "click" , function(){ setTimeout(function() {window.ice.ace.DataTables['contentForm:table'].resizeScrolling(); }, 1000); }); </script> This is like a built-in ice.ace.instance() functionality in the ace:dataTable component, so it's possible to get data table instances by id that are registered in the object window.ice.ace.DataTables. The delay is actually necessary to be long, otherwise there will be and object not found error.
        Hide
        Arturo Zambrano added a comment -

        r52085: added function to mobi:tabSet to resize ace:dataTable components found in content panes whenever changing to a different tab, in order to fix possible misalignments

        Show
        Arturo Zambrano added a comment - r52085: added function to mobi:tabSet to resize ace:dataTable components found in content panes whenever changing to a different tab, in order to fix possible misalignments
        Hide
        Arturo Zambrano added a comment -

        r52211: mobi:tabSet, fix to apply the autoHeight functionality when tab contents are loaded dynamically
        r52212: committed fix to fedex branch http://dev.icesoft.com/svn/ossrepo/icefaces-ee/patches/icemobile-1.3.1_P05_Fedex/icemobile

        I could actually reproduce the issue on the attached test case. The problem was that when loading the page for the first time after clearing the cache, the issue wasn't present; everything looked and worked normal. Only when loading the page on a different tab or when reloading the page, during the same session, was when the issue was actually visible. This is a fix for an issue that had been always there: the autoHeight functionality was only executed when the component was first loaded on the page. So, if the tabSet had dynamic content, this dynamic content wasn't being taken into account when doing the autoHeight operations. This fix invokes the autoHeight function when changing tabs, and it also invokes the ace:dataTable's resizeScrolling() and resizePaginator() functions afterwards.

        Show
        Arturo Zambrano added a comment - r52211: mobi:tabSet, fix to apply the autoHeight functionality when tab contents are loaded dynamically r52212: committed fix to fedex branch http://dev.icesoft.com/svn/ossrepo/icefaces-ee/patches/icemobile-1.3.1_P05_Fedex/icemobile I could actually reproduce the issue on the attached test case. The problem was that when loading the page for the first time after clearing the cache, the issue wasn't present; everything looked and worked normal. Only when loading the page on a different tab or when reloading the page, during the same session, was when the issue was actually visible. This is a fix for an issue that had been always there: the autoHeight functionality was only executed when the component was first loaded on the page. So, if the tabSet had dynamic content, this dynamic content wasn't being taken into account when doing the autoHeight operations. This fix invokes the autoHeight function when changing tabs, and it also invokes the ace:dataTable's resizeScrolling() and resizePaginator() functions afterwards.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: