diff --git a/src/sao.less b/src/sao.less
index 034192c564..6b936889e2 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -88,6 +88,12 @@ body {
             height: 2em;
         }
     }
+    & .editabletree-char, .editabletree-date, .editabletree-datetime,
+    .editabletree-integer, .editabletree-float, .editabletree-selection,
+    .editabletree-float_time, .editabletree-boolean, .editabletree-many2one,
+    .editabletree-one2many {
+        width: 100%;
+    }
     & td {
         white-space: nowrap;
         overflow: hidden;
@@ -120,21 +126,6 @@ body {
     & td.form-one2many, td.form-many2many {
         vertical-align: top;
     }
-    & .form-many2one, .form-date, .form-binary, .form-reference {
-        & button {
-            float: right;
-        }
-        & div {
-            overflow: hidden;
-            & input {
-                width: 100%;
-                boxing-sizing: border-box;
-            }
-        }
-        & select, span {
-            float: left;
-        }
-    }
     & .form-one2many-menu, .form-one2many-content,
     .form-many2many-menu, .form-many2many-content {
         border: 1px solid rgb(170, 170, 170);
@@ -162,6 +153,41 @@ body {
         }
     }
 }
+.form-date, .form-datetime, .form-many2one, .form-binary, .form-reference,
+.editabletree-date, .editabletree-datetime, .editabletree-many2one,
+.editabletree-binary, .editabletree-reference {
+    & button {
+        height: 1.5em;
+        float: right;
+        border: 0;
+    }
+    & div {
+        overflow: hidden;
+        & input {
+            width: 100%;
+            height: 1.5em;
+            border: 0;
+            padding: 0;
+            background-color: inherit;
+        }
+    }
+    & select, span {
+        float: left;
+    }
+    & select {
+        max-width: 50%;
+    }
+}
+
+.form-binary, .editabletree-binary {
+    min-width: calc(5 * 2.4em);
+}
+
+.form-integer, .form-float, .form-float-time,
+.column-integer, .column-float, .column-float_time,
+.editabletree-integer, .editabletree-float, .editabletree-float_time {
+    text-align: right;
+}
 
 button {
     & .ui-icon-custom {
diff --git a/src/view.js b/src/view.js
index 3784e9f6a1..054058721f 100644
--- a/src/view.js
+++ b/src/view.js
@@ -940,9 +940,7 @@
             this.factor = Number(attributes.factor || 1);
         },
         get_cell: function() {
-            var cell = Sao.View.Tree.IntegerColumn._super.get_cell.call(this);
-            cell.css('text-align', 'right');
-            return cell;
+            return Sao.View.Tree.IntegerColumn._super.get_cell.call(this);
         },
         update_text: function(cell, record) {
             cell.text(this.field.get_client(record, this.factor));
@@ -1915,11 +1913,11 @@
             Sao.View.Form.Date._super.init.call(this, field_name, model,
                 attributes);
             this.el = jQuery('<div/>', {
-                'class': this.class_ + ' ui-widget'
+                'class': this.class_ +
+                ' ui-widget ui-widget-content ui-corner-all'
             });
             this.date = jQuery('<input/>', {
-                'type': 'input',
-                'class': 'ui-widget-content ui-corner-all'
+                'type': 'input'
             });
             this.el.append(jQuery('<div/>').append(this.date));
             this.date.datepicker({
@@ -1937,9 +1935,6 @@
                 this.date.datepicker('show');
             }.bind(this));
         },
-        _get_color_el: function() {
-            return this.date;
-        },
         get_format: function(record, field) {
             return Sao.common.date_format();
         },
@@ -1959,6 +1954,7 @@
     });
 
     Sao.View.Form.DateTime = Sao.class_(Sao.View.Form.Date, {
+        class_: 'form-datetime',
         init: function(field_name, model, attributes) {
             Sao.View.Form.DateTime._super.init.call(this, field_name, model,
                 attributes);
@@ -1998,7 +1994,6 @@
         init: function(field_name, model, attributes) {
             Sao.View.Form.Integer._super.init.call(this, field_name, model,
                 attributes);
-            this.el.css('text-align', 'right');
             this.factor = Number(attributes.factor || 1);
         },
         set_value: function(record, field) {
@@ -2037,6 +2032,9 @@
             Sao.common.selection_mixin.init.call(this);
             this.init_selection();
         },
+        _get_color_el: function() {
+            return this.select;
+        },
         init_selection: function(key) {
             Sao.common.selection_mixin.init_selection.call(this, key,
                 this.set_selection.bind(this));
@@ -2127,7 +2125,6 @@
         init: function(field_name, model, attributes) {
             Sao.View.Form.FloatTime._super.init.call(this, field_name, model,
                 attributes);
-            this.el.css('text-align', 'right');
             this.conv = null; // TODO
         },
         display: function(record, field) {
@@ -2198,11 +2195,11 @@
             Sao.View.Form.Many2One._super.init.call(this, field_name, model,
                 attributes);
             this.el = jQuery('<div/>', {
-                'class': this.class_ + ' ui-widget'
+                'class': this.class_ +
+                ' ui-widget ui-widget-content ui-corner-all'
             });
             this.entry = jQuery('<input/>', {
-                'type': 'input',
-                'class': 'ui-widget-content ui-corner-all'
+                'type': 'input'
             });
             this.entry.on('keyup', this.key_press.bind(this));
             this.el.append(jQuery('<div/>').append(this.entry));
@@ -2217,9 +2214,6 @@
             // TODO autocompletion
             this._readonly = false;
         },
-        _get_color_el: function() {
-            return this.entry;
-        },
         get_screen: function() {
             var domain = this.field().get_domain(this.record());
             var context = this.field().get_context(this.record());
@@ -2453,9 +2447,7 @@
         init: function(field_name, model, attributes) {
             Sao.View.Form.Reference._super.init.call(this, field_name, model,
                 attributes);
-            this.select = jQuery('<select/>', {
-                'class': 'ui-widget-content ui-corner-all'
-            });
+            this.select = jQuery('<select/>');
             this.el.prepend(jQuery('<span/>').text('-'));
             this.el.prepend(this.select);
             this.select.change(this.select_changed.bind(this));
@@ -3109,23 +3101,22 @@
             this.filename = attributes.filename || null;
 
             this.el = jQuery('<div/>', {
-                'class': this.class_ + 'ui-widget'
+                'class': this.class_ +
+                ' ui-widget ui-widget-content ui-corner-all'
             });
 
             var inputs = jQuery('<div/>');
             this.el.append(inputs);
             if (this.filename && attributes.filename_visible) {
                 this.text = jQuery('<input/>', {
-                    type: 'input',
-                    'class': 'ui-widget-content ui-corner-all'
+                    type: 'input'
                 });
                 this.text.change(this.focus_out.bind(this));
                 this.text.on('keyup', this.key_press.bind(this));
                 inputs.append(this.text);
             }
             this.size = jQuery('<input/>', {
-                type: 'input',
-                'class': 'ui-widget ui-widget-content ui-corner-all'
+                type: 'input'
             });
             inputs.append(this.size);
 
@@ -3139,7 +3130,7 @@
             this.el.prepend(this.but_new);
 
             if (this.filename) {
-                this.but_open = jQuery('<a/>').button({
+                this.but_open = jQuery('<button/>').button({
                     icons: {
                         primary: 'ui-icon-folder-open'
                     },