Merge pull request #7139 from jdfreder/widget-space-fix

Fix padding of widgets.

IPython/html/static/style/ipython.min.css

@@ -1403,7 +1403,7 b' h6:hover .anchor-link {'
 .widget-text {
   /* String Textbox - used for TextBoxView and TextAreaView */
   width: 350px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-listbox {
   /* Listbox */
@@ -1413,7 +1413,7 b' h6:hover .anchor-link {'
 .widget-numeric-text {
   /* Single Line Textbox - used for IntTextView and FloatTextView */
   width: 150px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-progress {
   /* Progress Bar */
@@ -1451,10 +1451,6 b' h6:hover .anchor-link {'
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-  margin-right: 5px;
-  margin-left: 5px;
 }
 .widget-hbox input[type="checkbox"] {
   margin-top: 9px;

IPython/html/static/style/style.min.css

@@ -9266,7 +9266,7 b' h6:hover .anchor-link {'
 .widget-text {
   /* String Textbox - used for TextBoxView and TextAreaView */
   width: 350px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-listbox {
   /* Listbox */
@@ -9276,7 +9276,7 b' h6:hover .anchor-link {'
 .widget-numeric-text {
   /* Single Line Textbox - used for IntTextView and FloatTextView */
   width: 150px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-progress {
   /* Progress Bar */
@@ -9314,10 +9314,6 b' h6:hover .anchor-link {'
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-  margin-right: 5px;
-  margin-left: 5px;
 }
 .widget-hbox input[type="checkbox"] {
   margin-top: 9px;

IPython/html/static/widgets/js/widget_bool.js

@@ -30,7 +30,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$checkbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$checkbox.css(name, value);
+            }
         },
 
         handle_click: function() {

IPython/html/static/widgets/js/widget_int.js

@@ -57,6 +57,8 b' define(['
                 this.$slider_container.css(name, value);
             } else if (name == 'width' || name == 'height' || name == 'background') {
                 this.$slider_container.css(name, value);
+            } else if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
             } else {
                 this.$slider.css(name, value);
             }
@@ -333,7 +335,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$textbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$textbox.css(name, value);
+            }
         },
 
         events: {
@@ -468,6 +474,8 b' define(['
                 this.$progress.css(name, value);
             } else if (name == 'color') {                
                 this.$bar.css('background', value);
+            } else if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
             } else {
                 this.$bar.css(name, value);
             }

IPython/html/static/widgets/js/widget_selection.js

@@ -135,6 +135,8 b' define(['
             } else if (name == 'height') {
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
+            } else if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
             } else {
                 this.$droplist.css(name, value);
                 this.$droplabel.css(name, value);
@@ -241,7 +243,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$container.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$container.css(name, value);
+            }
         },
 
         handle_click: function (e) {
@@ -356,8 +362,12 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this._css_state[name] = value;
-            this.update_style_traits();
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this._css_state[name] = value;
+                this.update_style_traits();
+            }
         },
 
         update_style_traits: function(button) {
@@ -478,7 +488,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$listbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$listbox.css(name, value);
+            }
         },
 
         handle_click: function (e) {

IPython/html/static/widgets/js/widget_selectioncontainer.js

@@ -184,7 +184,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$tabs.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$tabs.css(name, value);
+            }
         },
 
         remove_child_view: function(view) {

IPython/html/static/widgets/js/widget_string.js

@@ -125,7 +125,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$textbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$textbox.css(name, value);
+            }
         },
         
         events: {
@@ -208,7 +212,11 b' define(['
             /**
              * Set a css attr of the widget view.
              */
-            this.$textbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$textbox.css(name, value);
+            }
         },
         
         events: {

IPython/html/static/widgets/less/widgets.less

@@ -145,8 +145,8 b''
 
 .widget-text {
     /* String Textbox - used for TextBoxView and TextAreaView */
-    width         : 350px;
-    margin : 0px !important;
+    width  : 350px;
+    margin : 0px;
 }
 
 .widget-listbox {
@@ -158,7 +158,7 b''
 .widget-numeric-text {
     /* Single Line Textbox - used for IntTextView and FloatTextView */
     width : 150px;
-    margin : 0px !important;
+    margin : 0px;
 }
 
 .widget-progress {
@@ -188,10 +188,6 b''
 .widget-hbox {
     /* Horizontal widgets */
     .hbox();
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
-    margin-right: 5px;
-    margin-left: 5px;
 
     input[type="checkbox"] {
         margin-top: 9px;

IPython/html/widgets/widget.py

@@ -434,7 +434,8 b' class DOMWidget(Widget):'
     
     width = CUnicode(sync=True)
     height = CUnicode(sync=True)
-    padding = CUnicode(sync=True)
+    # A default padding of 2.5 px makes the widgets look nice when displayed inline.
+    padding = CUnicode("2.5px", sync=True)
     margin = CUnicode(sync=True)
 
     color = Unicode(sync=True)