JavaScriptCollection
diff --git a/‎js/view-one/one.js‎
Lines changed: 5 additions & 5 deletions b/‎js/view-one/one.js‎
Lines changed: 5 additions & 5 deletions
diff --git a/‎less/one.less‎
Lines changed: 25 additions & 14 deletions b/‎less/one.less‎
Lines changed: 25 additions & 14 deletions
diff --git a/‎less/variables.less‎
Lines changed: 8 additions & 0 deletions b/‎less/variables.less‎
Lines changed: 8 additions & 0 deletions
@@ -599,24 +599,24 @@ return Backbone.View.extend({
             var hidden= _.isUndefined(visible)?false:!visible;
             h.push('<div data-p-width="100" class="evol-pnl evo-p-wiz" style="width:100%;'+(hidden?'display:none;':'')+'">');
         }else{
-            h.push('<div data-p-width="'+p.width+'" class="evol-pnl pull-left" style="width:'+p.width+'%">');
+            h.push('<div data-p-width="'+p.width+'" class="evol-pnl" style="width:'+p.width+'%">');
         }
         h.push(eUI.HTMLPanelBegin(p, this.style||'panel-default'),
-            '<fieldset data-pid="'+p.id+(p.readonly?'" disabled>':'">'));
+            '<fieldset data-pid="'+p.id+(p.readonly?'" disabled>':'"><div class="evol-fset">'));
         _.each(p.elements, function (elem) {
             if(elem.type=='panel-list'){
                 that._renderPanelList(h, elem, elem.readonly?'browse':mode);
             }else{
                 if(elem.type==fts.hidden){
                     h.push(uiInput.hidden(that.fieldViewId(elem.id), that.getModelFieldValue(elem.id, elem.defaultValue, mode)));
                 }else{
-                    h.push('<div style="width:'+parseInt(elem.width||100, 10)+'%" class="pull-left evol-fld">');
+                    h.push('<div style="width:'+parseInt(elem.width||100, 10)+'%" class="evol-fld">');
                     that.renderField(h, elem, mode, iconsPath);
                     h.push("</div>");
                 }
             }
         });
-        h.push('</fieldset>'+
+        h.push('</div></fieldset>'+
             eUI.HTMLPanelEnd()+
             '</div>');
         return this;
@@ -626,7 +626,7 @@ return Backbone.View.extend({
         var isEditable = p.readonly?false:(mode!=='browse'),
             vMode=isEditable?mode:'browse';
 
-        h.push('<div style="width:'+p.width+'%" class="evol-pnl pull-left" data-pid="'+p.id+'">',
+        h.push('<div style="width:'+p.width+'%" class="evol-pnl" data-pid="'+p.id+'">',
             eUI.HTMLPanelBegin(p, this.style),
             '<table class="table" data-mid="'+(p.attribute || p.id)+'"><thead><tr>');
         _.each(p.elements, function (elem) {
 
@@ -4,21 +4,24 @@
 //  Copyright (c) 2015, Olivier Giulieri
 
 /* --- panels & tabs --- */
-.evol-pnl .table .evol-money{
-  //TODO: better fix
-  width: 200px;
-}
-.evol-pnl > div > fieldset{
-    padding: 10px 10px 5px 2px;
-}
-.evol-pnl > .panel{
-    margin-bottom: 12px;
-}
-.evol-fld{
-    padding-left:10px !important;
-    margin-bottom: 6px;
+.evol-pnls{
+  .flex-holder()
+}
+.evol-pnl {
+  .flex-item();
+  .table .evol-money{
+    //TODO: better fix
+    width: 200px;
+  }
+  .evol-pnl {
+     > .panel{
+        margin-bottom: 12px;
+    }
+    > div > fieldset{
+      padding: 10px 10px 5px 2px;
+    }
+  }
 }
-
 .evol-pnl,
 .evol-pnl-lst{
     padding-left:10px !important;
@@ -44,6 +47,14 @@
 }
 
 /* --- fields --- */
+.evol-fset{
+    .flex-holder();
+}
+.evol-fld{
+    .flex-item();
+    padding-left:10px !important;
+    margin-bottom: 6px;
+}
 
 .evol-required,
 .evol-asterix{
 
@@ -41,3 +41,11 @@
   -moz-border-radius: @r;
   -webkit-border-radius: @r;
 }
+.flex-holder(){
+    display: flex;
+    flex-wrap: wrap;
+}
+.flex-item(){
+    box-sizing: border-box;
+    flex-grow: 1;
+}