5 Replies Latest reply on Sep 3, 2013 5:54 PM by bleathem

    Using an extendedDataTable at 100% width (with resizing of parent div)

    ibenjes

      Hi,

       

      I am trying to use an rich:extendedDataTable at 100% width. The parent div can change size using javascript (there is a default width and a maximized width for the table) however the rich:extendedDataTable does not change it size! The style of the table is set to width:100%.

       

      Screen Shot 2013-08-28 at 09.52.47.png

      From the generated HTML you can see that the table still has the style width:100% but the div inside the <td> tag has a fixed width of 1051px which was probably calculated when the table was rendered initially.

       

      How can you keep the whole table at 100% width?

       

      The picture below shows the 'cut' off table after a resize. The table is still scrolling horizontally.

      Screen Shot 2013-08-28 at 10.00.54.png

        • 1. Re: Using an extendedDataTable at 100% width (with resizing of parent div)
          bleathem

          The EDT's javascript resize listeners should resize the EDT when the size of the viewport is changed.  Can you debug the javascript and see if the resize event is correctly being observed?  What happens if you manual invoke the updateLayout method from the browser console?

           

          https://github.com/richfaces4/components/blob/master/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/extendedDataTable.js

          1 of 1 people found this helpful
          • 2. Re: Re: Using an extendedDataTable at 100% width (with resizing of parent div)
            ibenjes

            Hi Brian,

             

            thanks for your tip, that got me a bit closer.

            I had some other functions that were called on window resize which seemed to interfere with the updating of the extendedDataTable layout. Once I've changed that changing the browser window would change the extendedDataTable as well.

            However if you have the table in a div and only that div changes its size the EDT is not being updated.

             

            I have a little test page. If you click on 'Big' it will change the parent div of the first table to 1000px but (at least for me) the EDT is not being resized. When you click on 'Update Layout' it works okay. When you change the browser width the second EDT is updated correctly.

             

            The backing bean 'textBeajust returns a list of Strings.

             

            <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:a="http://richfaces.org/a4j"
            xmlns:s="http://jboss.org/schema/seam/taglib"
            xmlns:rich="http://richfaces.org/rich">
            <f:view>
            <h:head>
            
            </h:head>
            <h:body>
            <s:div>
            
                <script type="text/javascript">//<![CDATA[
            
                function layoutChange(){
                #{rich:component('testtable')}.updateLayout();
                }
            
                function small(){
                jQuery('.tabcontainer').width(200);
                }
            
                function big(){
                jQuery('.tabcontainer').width(1000);
                }
            
              // ]]></script>
            
            <a onclick="layoutChange()">Update Layout</a>
            <a onclick="small()">Small</a>
            <a onclick="big()">Big</a>
            
            <s:div styleClass="tabcontainer" style="width:200px;">
            <rich:extendedDataTable id="testtable" value="#{testBean.cars}" var="car"
            style="width:100%" width="100%">
             <rich:column width="500">
              #{car}
             </rich:column>
             <rich:column width="500">
              #{car}
             </rich:column>
             <rich:column width="200">
              #{car}
             </rich:column>
             <rich:column width="200">
              #{car}
             </rich:column>
             <rich:column width="200">
              #{car}
             </rich:column>
             <rich:column width="1000">
              #{car}
             </rich:column>
            </rich:extendedDataTable>
            </s:div>
            <s:div style="width:100%">
            <rich:extendedDataTable id="testtable2" value="#{testBean.cars}" var="car"
            style="width:100%" width="100%">
             <rich:column width="500">
              #{car}
             </rich:column>
             <rich:column width="500">
              #{car}
             </rich:column>
             <rich:column width="200">
              #{car}
             </rich:column>
             <rich:column width="200">
              #{car}
             </rich:column>
             <rich:column width="200">
              #{car}
             </rich:column>
             <rich:column width="1000">
              #{car}
             </rich:column>
            </rich:extendedDataTable>
            </s:div>
            
            
             </s:div>
            
            </h:body>
            </f:view>
            </ui:composition>
            
            • 3. Re: Re: Using an extendedDataTable at 100% width (with resizing of parent div)
              bleathem

              I've fixed an issue in the upcoming 4.3.4 where the resizeListener of the EDT wasn't playing nicely with other resizeListeners (RF-13117).

               

              As for changing size with an arbitrary resize - for you can register your own listener to the parent's resize using jQuery.on - have the callback invoke the EDT's updateLayout.  Longer term, you can file a feature request in jira asking for the EDT to respond to parent resize events.

              • 4. Re: Re: Using an extendedDataTable at 100% width (with resizing of parent div)
                ibenjes

                Hi Brian,

                 

                 

                I've tried to register a callback on the parent div with

                jQuery('.tabcontainer').resize(function() {...});

                and with

                jQuery('.tabcontainer').on('resize',function(){});

                but both don't seem to work.

                 

                 

                I've seen that there is a plug-in 'jquery resize' to enable resize events on divs and not only the main window (http://benalman.com/projects/jquery-resize-plugin/) but that looks old. Is that plug-in still needed in jQuery 1.8.3?

                • 5. Re: Using an extendedDataTable at 100% width (with resizing of parent div)
                  bleathem

                  The jQuery docs http://api.jquery.com/resize/ indicate that indeed the resize event is only triggered when the window size changes.  You'll have to find some other means of listening to div resize events.  Perhaps the library you are using to resize the div fires an event that you can listen to?  Otherwise a quick google search shows a lot of possible solution on stackoverflow.com.