diff --git a/src/sao.less b/src/sao.less index 124bf145f6..447f0fc166 100644 --- a/src/sao.less +++ b/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, diff --git a/src/view.js b/src/view.js index 5bba8f3d14..719480c12e 100644 --- a/src/view.js +++ b/src/view.js @@ -110,7 +110,7 @@ this.selection_mode = (screen.attributes.selection_mode || Sao.common.SELECTION_SINGLE); this.el = jQuery('
', { - '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() {