Fix some bugs found by the widget examples,

add margin and padding base traits,
add overflow traits to box base.

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) {

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) {

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)

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