Allow horizontal scrolling large on treeview

review15731002

src/sao.less

@@ -36,9 +36,10 @@ button {
 }
 
 .treeview {
+    overflow-x: auto;
+
     & > table.tree {
         width: 100%;
-        table-layout: fixed;
 
         & > thead > tr > th.selection {
             width: 30px;
@@ -46,6 +47,7 @@ button {
         & > thead > tr > th {
             overflow: hidden;
             text-overflow: ellipsis;
+            min-width: 30px;
         }
         & > tbody > tr > td {
             cursor: pointer;
@@ -192,6 +194,10 @@ button {
 }
 
 @media screen and (max-width: 768px) {
+    .treeview.responsive {
+        /* Override the width from Sao.View.resize */
+        width: 100% !important;
+    }
     table.responsive,
     table.responsive > thead,
     table.responsive > thead > tr,

src/view.js

@@ -110,7 +110,7 @@
             this.selection_mode = (screen.attributes.selection_mode ||
                 Sao.common.SELECTION_SINGLE);
             this.el = jQuery('<div/>', {
-                'class': 'treeview'
+                'class': 'treeview responsive'
             });
             this.expanded = {};
             this.children_field = children_field;
@@ -511,6 +511,30 @@
         }
     });
 
+    Sao.View.resize = function(el) {
+        // Let the browser compute the table size with the fixed layout
+        // then set this size to the treeview to allow scroll on overflow
+        // and set the table layout to auto to get the width from the content.
+        if (!el) {
+            el = jQuery(document);
+        }
+        el.find('.treeview').each(function() {
+            var treeview = jQuery(this);
+            treeview.css('width', '100%');
+            treeview.children('.tree').css('table-layout', 'fixed');
+        });
+        el.find('.treeview').each(function() {
+            var treeview = jQuery(this);
+            if (treeview.width()) {
+                treeview.css('width', treeview.width());
+                treeview.children('.tree').css('table-layout', 'auto');
+            }
+        });
+    };
+    jQuery(window).resize(function() {
+        Sao.View.resize();
+    });
+
     Sao.View.Tree.Row = Sao.class_(Object, {
         init: function(tree, record, pos, parent) {
             this.tree = tree;
@@ -1797,6 +1821,7 @@
                         var container = this.containers[j];
                         container.resize();
                     }
+                    Sao.View.resize(this.el);
                 }.bind(this));
         },
         set_value: function() {