Layout improvement: auto scroll for list and panel-list when all columns do not fit.

Author: evoluteur

js/view-many/many-list.js

@@ -32,7 +32,7 @@ Evol.ViewMany.List = Evol.View_Many.extend({
             link = (this.links!==false);
 
         h+='<div class="evol-many-list">'+
-            '<table class="table table-bordered'+(link?' table-hover':'')+'"><thead><tr>';
+            '<div><table class="table table-bordered'+(link?' table-hover':'')+'"><thead><tr>';
         if(this.selectable){
             h+='<th class="list-td-sel">'+this._HTMLCheckbox('cbxAll')+'</th>';
         }
@@ -41,7 +41,7 @@ Evol.ViewMany.List = Evol.View_Many.extend({
         });
         h+='</tr></thead><tbody>'+
             this._HTMLbody(fields, pSize, this.uiModel.icon, 0, this.selectable)+
-            '</tbody></table>'+
+            '</tbody></table></div>'+
             this._HTMLpagination(0, pSize, models.length)+
             '<div class="evo-many-summary">'+this.pageSummary(this.pageIndex, pSize, models.length)+'</div>'+
             '</div>';

js/view-one/one.js

@@ -642,7 +642,7 @@ return Backbone.View.extend({
 
         h.push('<div style="width:'+p.width+'%" class="evol-pnl" data-pid="'+p.id+'">',
             dom.panelBegin(p, this.style, true),
-            '<table class="table" data-mid="'+(p.attribute || p.id)+'"><thead><tr>');
+            '<div class="evo-plist"><table class="table" data-mid="'+(p.attribute || p.id)+'"><thead><tr>');
         _.each(p.elements, function (elem) {
             if(elem.type===fts.pix){
                 h.push('<th class="evo-col-pix">');
@@ -656,7 +656,7 @@ return Backbone.View.extend({
         }
         h.push('</tr></thead><tbody>');
         this._renderPanelListBody(h, p, null, vMode);
-        h.push('</tbody></table>',
+        h.push('</tbody></table></div>',
             dom.panelEnd(),
             '</div>');
         return this;

less/many.less

@@ -11,45 +11,52 @@
 
 .evol-many-list{
 
-  overflow-x: auto;
+  > div {
+    overflow-x: auto;
+    > .table {
 
-  > .table {
+      margin-bottom: 0;
 
-    img {
-      max-height: 60px;
-      padding:0;
-    }
-    tr{
-      transition: all 0.3s ease;
-    }
-    td{
-      position: relative;
-    }
-    th {
-      font-weight: @weight-label !important;
-      background-color: @toolbar-background-color;
-
-      .glyphicon {
-        display:none;
-        position:absolute;
-        opacity: .8;
-        margin-left: 6px;
-        background-color: white;
-        cursor: pointer;
-        width:22px;
-        height: 22px;
+      textarea{
+        min-width:200px;
       }
 
-      &:hover .glyphicon {
-        display: inline !important;
+      img {
+        max-height: 60px;
+        padding:0;
+      }
+      tr{
+        transition: all 0.3s ease;
       }
+      td{
+        position: relative;
+      }
+      th {
+        font-weight: @weight-label !important;
+        background-color: @toolbar-background-color;
+
+        .glyphicon {
+          display:none;
+          position:absolute;
+          opacity: .8;
+          margin-left: 6px;
+          background-color: white;
+          cursor: pointer;
+          width:22px;
+          height: 22px;
+        }
+
+        &:hover .glyphicon {
+          display: inline !important;
+        }
 
-    }
-    .evol-ellipsis{
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 120px;
+      }
+      .evol-ellipsis{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 120px;
+      }
     }
   }
 

less/one.less

@@ -8,6 +8,14 @@
   .flex-holder()
 }
 .evol-pnl {
+  padding-left:10px !important;
+  .table {
+    //margin-bottom: 0;
+    img {
+      max-height: 60px;
+      padding:0;
+    }
+  }
   .flex-item();
   .table .evol-money{
     //TODO: better fix
@@ -22,14 +30,18 @@
     }
   }
 }
-.evol-pnl,
-.evol-pnl-lst{
-  padding-left:10px !important;
-  .table {
-    img {
-      max-height: 60px;
-      padding:0;
-    }
+
+.evo-plist{
+  overflow-x: auto;
+  input[type="date"]{
+    max-width: 160px;
+  }
+  input[type="text"], 
+  textarea{
+    min-width: 120px;
+  }
+  .table{
+    margin-bottom: 0;
   }
 }
 
@@ -182,6 +194,7 @@ label{
 .evo-td-plusminus{
 
   width:70px;
+  min-width:70px;
 
   > div{
     float:left;