diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index a4bdac9..f0f919c 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -409,39 +409,72 @@ define(["widgets/js/manager",
// Public constructor
DOMWidgetView.__super__.initialize.apply(this, [parameters]);
this.on('displayed', this.show, this);
- this.after_displayed(function() {
- this.update_visible(this.model, this.model.get("visible"));
- this.update_css(this.model, this.model.get("_css"));
- }, this);
this.model.on('change:visible', this.update_visible, this);
this.model.on('change:_css', this.update_css, this);
+
this.model.on('change:_dom_classes', function(model, new_classes) {
var old_classes = model.previous('children');
this.update_classes(old_classes, new_classes);
}, this);
+
this.model.on('change:fore_color', function (model, value) {
this.update_attr('color', value); }, this);
+
this.model.on('change:back_color', function (model, value) {
this.update_attr('background', value); }, this);
+
this.model.on('change:width', function (model, value) {
this.update_attr('width', value); }, this);
+
this.model.on('change:height', function (model, value) {
this.update_attr('height', value); }, this);
+
this.model.on('change:border_color', function (model, value) {
this.update_attr('border-color', value); }, this);
+
this.model.on('change:border_width', function (model, value) {
this.update_attr('border-width', value); }, this);
+
this.model.on('change:border_style', function (model, value) {
this.update_attr('border-style', value); }, this);
+
this.model.on('change:font_style', function (model, value) {
this.update_attr('font-style', value); }, this);
+
this.model.on('change:font_weight', function (model, value) {
this.update_attr('font-weight', value); }, this);
+
this.model.on('change:font_size', function (model, value) {
this.update_attr('font-size', value); }, this);
+
this.model.on('change:font_family', function (model, value) {
this.update_attr('font-family', value); }, this);
- this.update_classes([], this.model.get('_dom_classes'));
+
+ this.model.on('change:padding', function (model, value) {
+ this.update_attr('padding', value); }, this);
+
+ this.model.on('change:margin', function (model, value) {
+ this.update_attr('margin', value); }, this);
+
+ this.after_displayed(function() {
+ this.update_visible(this.model, this.model.get("visible"));
+ this.update_css(this.model, this.model.get("_css"));
+
+ this.update_classes([], this.model.get('_dom_classes'));
+ this.update_attr('color', this.model.get('fore_color'));
+ this.update_attr('background', this.model.get('back_color'));
+ this.update_attr('width', this.model.get('width'));
+ this.update_attr('height', this.model.get('height'));
+ this.update_attr('border-color', this.model.get('border_color'));
+ this.update_attr('border-width', this.model.get('border_width'));
+ this.update_attr('border-style', this.model.get('border_style'));
+ this.update_attr('font-style', this.model.get('font_style'));
+ this.update_attr('font-weight', this.model.get('font_weight'));
+ this.update_attr('font-size', this.model.get('font_size'));
+ this.update_attr('font-family', this.model.get('font_family'));
+ this.update_attr('padding', this.model.get('padding'));
+ this.update_attr('margin', this.model.get('margin'));
+ }, this);
},
update_attr: function(name, value) {
diff --git a/IPython/html/static/widgets/js/widget_box.js b/IPython/html/static/widgets/js/widget_box.js
index a613c7c..68cb0ee 100644
--- a/IPython/html/static/widgets/js/widget_box.js
+++ b/IPython/html/static/widgets/js/widget_box.js
@@ -14,6 +14,12 @@ define([
this.model.on('change:children', function(model, value) {
this.update_children(model.previous('children'), value);
}, this);
+ this.model.on('change:overflow_x', function(model, value) {
+ this.update_overflow_x();
+ }, this);
+ this.model.on('change:overflow_y', function(model, value) {
+ this.update_overflow_y();
+ }, this);
},
update_attr: function(name, value) {
@@ -26,6 +32,18 @@ define([
this.$box = this.$el;
this.$box.addClass('widget-box');
this.update_children([], this.model.get('children'));
+ this.update_overflow_x();
+ this.update_overflow_y();
+ },
+
+ update_overflow_x: function() {
+ // Called when the x-axis overflow setting is changed.
+ this.$box.css('overflow-x', this.model.get('overflow_x'));
+ },
+
+ update_overflow_y: function() {
+ // Called when the y-axis overflow setting is changed.
+ this.$box.css('overflow-y', this.model.get('overflow_y'));
},
update_children: function(old_list, new_list) {
diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py
index d6e5e74..5e19d19 100644
--- a/IPython/html/widgets/widget.py
+++ b/IPython/html/widgets/widget.py
@@ -385,6 +385,8 @@ class DOMWidget(Widget):
width = CUnicode(sync=True)
height = CUnicode(sync=True)
+ padding = CUnicode(sync=True)
+ margin = CUnicode(sync=True)
fore_color = Unicode(sync=True)
back_color = Unicode(sync=True)
diff --git a/IPython/html/widgets/widget_box.py b/IPython/html/widgets/widget_box.py
index bd204bd..aa3ebb0 100644
--- a/IPython/html/widgets/widget_box.py
+++ b/IPython/html/widgets/widget_box.py
@@ -18,6 +18,16 @@ class Box(DOMWidget):
# Using a tuple here to force reassignment to update the list.
# When a proper notifying-list trait exists, that is what should be used here.
children = Tuple(sync=True, allow_none=False)
+
+ _overflow_values = ['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', '']
+ overflow_x = CaselessStrEnum(
+ values=_overflow_values,
+ default_value='', allow_none=False, sync=True, help="""Specifies what
+ happens to content that is too large for the rendered region.""")
+ overflow_y = CaselessStrEnum(
+ values=_overflow_values,
+ default_value='', allow_none=False, sync=True, help="""Specifies what
+ happens to content that is too large for the rendered region.""")
def __init__(self, children = (), **kwargs):
kwargs['children'] = children