diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index e809946..edbf5cf 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -1403,7 +1403,7 @@ 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 @@ 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 @@ 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;
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index c42bee0..3b2b2af 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -9266,7 +9266,7 @@ 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 @@ 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 @@ 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;
diff --git a/IPython/html/static/widgets/js/widget_bool.js b/IPython/html/static/widgets/js/widget_bool.js
index 9b84118..0234054 100644
--- a/IPython/html/static/widgets/js/widget_bool.js
+++ b/IPython/html/static/widgets/js/widget_bool.js
@@ -30,7 +30,11 @@ 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() {
diff --git a/IPython/html/static/widgets/js/widget_int.js b/IPython/html/static/widgets/js/widget_int.js
index 4b10705..18af78e 100644
--- a/IPython/html/static/widgets/js/widget_int.js
+++ b/IPython/html/static/widgets/js/widget_int.js
@@ -57,6 +57,8 @@ 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 @@ 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 @@ 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);
}
diff --git a/IPython/html/static/widgets/js/widget_selection.js b/IPython/html/static/widgets/js/widget_selection.js
index 52742ae..25fdccc 100644
--- a/IPython/html/static/widgets/js/widget_selection.js
+++ b/IPython/html/static/widgets/js/widget_selection.js
@@ -135,6 +135,8 @@ 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 @@ 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 @@ 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 @@ 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) {
diff --git a/IPython/html/static/widgets/js/widget_selectioncontainer.js b/IPython/html/static/widgets/js/widget_selectioncontainer.js
index d1f39c3..25b09cf 100644
--- a/IPython/html/static/widgets/js/widget_selectioncontainer.js
+++ b/IPython/html/static/widgets/js/widget_selectioncontainer.js
@@ -184,7 +184,11 @@ 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) {
diff --git a/IPython/html/static/widgets/js/widget_string.js b/IPython/html/static/widgets/js/widget_string.js
index eb1d783..81bd8e3 100644
--- a/IPython/html/static/widgets/js/widget_string.js
+++ b/IPython/html/static/widgets/js/widget_string.js
@@ -125,7 +125,11 @@ 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 @@ 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: {
diff --git a/IPython/html/static/widgets/less/widgets.less b/IPython/html/static/widgets/less/widgets.less
index 0fddc75..9ca7531 100644
--- a/IPython/html/static/widgets/less/widgets.less
+++ b/IPython/html/static/widgets/less/widgets.less
@@ -145,8 +145,8 @@
.widget-text {
/* String Textbox - used for TextBoxView and TextAreaView */
- width : 350px;
- margin : 0px !important;
+ width : 350px;
+ margin : 0px;
}
.widget-listbox {
@@ -158,7 +158,7 @@
.widget-numeric-text {
/* Single Line Textbox - used for IntTextView and FloatTextView */
width : 150px;
- margin : 0px !important;
+ margin : 0px;
}
.widget-progress {
@@ -188,10 +188,6 @@
.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;
diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py
index b9e8bd8..989b1e4 100644
--- a/IPython/html/widgets/widget.py
+++ b/IPython/html/widgets/widget.py
@@ -434,7 +434,8 @@ 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)