Attempt 1, HBox and VBox implementation.

IPython/html/static/notebook/js/widget.js

@@ -1,261 +1,267 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // WidgetModel, WidgetView, and WidgetManager
 //============================================================================
 /**
  * Base Widget classes
  * @module IPython
  * @namespace IPython
  * @submodule widget
  */
 
 "use strict";
 
 // Use require.js 'define' method so that require.js is intelligent enough to
 // syncronously load everything within this file when it is being 'required' 
 // elsewhere.
 define(["static/components/underscore/underscore-min.js",
          "static/components/backbone/backbone-min.js",
         ], function(){
 
     // Only run once on a notebook.
     if (IPython.notebook.widget_manager == undefined) {
 
         //--------------------------------------------------------------------
         // WidgetModel class
         //--------------------------------------------------------------------
         var WidgetModel = Backbone.Model.extend({
             apply: function(sender) {
                 this.save();
 
                 for (var index in this.views) {
                     var view = this.views[index];
                     if (view !== sender) {
                         view.refresh();    
                     }
                 }
             }
         });
 
 
         //--------------------------------------------------------------------
         // WidgetView class
         //--------------------------------------------------------------------
         var WidgetView = Backbone.View.extend({
             
             initialize: function() {
                 this.model.on('change',this.refresh,this);
             },
             
             refresh: function() {
                 this.update();
                 
                 if (this.model.css != undefined) {
                     for (var selector in this.model.css) {
                         if (this.model.css.hasOwnProperty(selector)) {
                             
                             // Get the elements via the css selector.  If the selector is
                             // blank, assume the current element is the target.
                             var elements = this.$el.find(selector);
                             if (selector=='') {
                                 elements = this.$el;
                             }
                             
                             // Apply the css traits to all elements that match the selector.
                             if (elements.length>0){
                                 var css_traits = this.model.css[selector];    
                                 for (var css_key in css_traits) {
                                     if (css_traits.hasOwnProperty(css_key)) {
                                         elements.css(css_key, css_traits[css_key]);
                                     }
                                 }
                             }
                         }
                     }
                 }
             },
         });
 
 
         //--------------------------------------------------------------------
         // WidgetManager class
         //--------------------------------------------------------------------
         // Public constructor
         var WidgetManager = function(comm_manager){
             this.comm_manager = comm_manager;
             this.widget_model_types = {};
             this.widget_view_types = {};
             this.model_widget_views = {};
             
             var that = this;
             Backbone.sync = function(method, model, options, error) {
                 var result = that.send_sync(method, model);
                 if (options.success) {
                   options.success(result);
                 }
             }; 
         }
 
         // Register a widget model type.
         WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
             
             // Register the widget with the comm manager.  Make sure to pass this object's context
             // in so `this` works in the call back.
             this.comm_manager.register_target(widget_model_name, $.proxy(this.handle_com_open, this));
             
             // Register the types of the model and view correspong to this widget type.  Later
             // the widget manager will initialize these when the comm is opened.
             this.widget_model_types[widget_model_name] = widget_model_type;
         }
 
         // Register a widget view type.
         WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
             this.widget_view_types[widget_view_name] = widget_view_type;
         }
 
         // Handle when a comm is opened.
         WidgetManager.prototype.handle_com_open = function (comm, msg) {
             var widget_type_name = msg.content.target_name;
             
             // Create the corresponding widget model.
             var widget_model = new this.widget_model_types[widget_type_name];
 
             // Remember comm associated with the model.
             widget_model.comm = comm;
             comm.model = widget_model;
 
             // Create an array to remember the views associated with the model.
             widget_model.views = [];
 
             // Add a handle to delete the control when the comm is closed.
             var that = this;
             var handle_close = function(msg) {
                 that.handle_comm_closed(comm, msg);
             }
             comm.on_close(handle_close);
 
             // Handle incomming messages.
             var handle_msg = function(msg) {
                 that.handle_comm_msg(comm, msg);
             }
             comm.on_msg(handle_msg);
         }
 
         // Create view that represents the model.
         WidgetManager.prototype.show_view = function (widget_area, widget_model, widget_view_name) {
             var widget_view = new this.widget_view_types[widget_view_name]({model: widget_model});
             widget_view.render();
             widget_model.views.push(widget_view);
 
             // Handle when the view element is remove from the page.
             widget_view.$el.on("remove", function(){ 
                 var index = widget_model.views.indexOf(widget_view);
                 if (index > -1) {
                     widget_model.views.splice(index, 1);
                 }
                 widget_view.remove(); // Clean-up view 
 
                 // Close the comm if there are no views left.
                 if (widget_model.views.length()==0) {
                     widget_model.comm.close();     
                 }
             });
 
             // Add the view's element to cell's widget div.
             widget_area
-                .append($("<div />").append(widget_view.$el))
+                .append(widget_view.$el)
                 .parent().show(); // Show the widget_area (parent of widget_subarea)
 
             // Update the view based on the model contents.
             widget_view.refresh();
         }
 
         // Handle incomming comm msg.
         WidgetManager.prototype.handle_comm_msg = function (comm, msg) {
             // Different logic for different methods.
             var method = msg.content.data.method;
             switch (method){
                 case 'show':
 
                     // TODO: Get cell from registered output handler.
                     var cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index()-1);
                     var widget_subarea = cell.element.find('.widget_area').find('.widget_subarea');
 
                     if (msg.content.data.parent != undefined) {
                         var find_results = widget_subarea.find("." + msg.content.data.parent);
                         if (find_results.length > 0) {
                             widget_subarea = find_results;
                         }
                     }
 
                     this.show_view(widget_subarea, comm.model, msg.content.data.view_name);
                     break;
                 case 'update':
                     this.handle_update(comm, msg.content.data.state);
                     break;
             }
         }
 
         // Handle when a widget is updated via the python side.
         WidgetManager.prototype.handle_update = function (comm, state) {
+            this.updating = true;
             for (var key in state) {
                 if (state.hasOwnProperty(key)) {
                     if (key=="_css"){
                         comm.model.css = state[key];
                     } else {
                         comm.model.set(key, state[key]); 
                     }
                 }
             }
             comm.model.save();
+            this.updating = false;
         }
 
         // Handle when a widget is closed.
         WidgetManager.prototype.handle_comm_closed = function (comm, msg) {
             for (var view_index in comm.model.views) {
                 var view = comm.model.views[view_index];
                 view.remove();
             }
         }
 
         // Get the cell output area corresponding to the comm.
         WidgetManager.prototype._get_comm_outputarea = function (comm) {
             // TODO: get element from comm instead of guessing
             var cell = IPython.notebook.get_cell(IPython.notebook.get_selected_index())
             return cell.output_area;
         }
 
         // Send widget state to python backend.
         WidgetManager.prototype.send_sync = function (method, model) {
-            
-            // Create a callback for the output if the widget has an output area associate with it.
-            var callbacks = {};
-            var comm = model.comm;
-            var outputarea = this._get_comm_outputarea(comm);
-            if (outputarea != null) {
-                callbacks = {
-                    iopub : {
-                    output : $.proxy(outputarea.handle_output, outputarea),
-                    clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
-                };
-            };
             var model_json = model.toJSON();
-            var data = {sync_method: method, sync_data: model_json};
-            comm.send(data, callbacks);
+
+            // Only send updated state if the state hasn't been changed during an update.
+            if (!this.updating) {
+                // Create a callback for the output if the widget has an output area associate with it.
+                var callbacks = {};
+                var comm = model.comm;
+                var outputarea = this._get_comm_outputarea(comm);
+                if (outputarea != null) {
+                    callbacks = {
+                        iopub : {
+                        output : $.proxy(outputarea.handle_output, outputarea),
+                        clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
+                    };
+                };
+                var data = {sync_method: method, sync_data: model_json};
+                comm.send(data, callbacks);    
+            }
+            
             return model_json;
         }
 
         IPython.WidgetManager = WidgetManager;
         IPython.WidgetModel = WidgetModel;
         IPython.WidgetView = WidgetView;
 
         IPython.notebook.widget_manager = new WidgetManager(IPython.notebook.kernel.comm_manager);    
 
     };
 });

IPython/html/static/notebook/js/widgets/bool.js

@@ -1,92 +1,94 b''
 
 require(["notebook/js/widget"], function(){
     
     var BoolWidgetModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('BoolWidgetModel', BoolWidgetModel);
 
     var CheckboxView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
 
             var $label = $('<label />')
                 .addClass('checkbox')
                 .appendTo(this.$el);
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .appendTo($label);
             this.$checkbox_label = $('<div />')
+                .addClass('widget_item')
                 .appendTo($label);
 
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 this.$checkbox.prop('checked', this.model.get('value'));
                 this.$checkbox_label.html(this.model.get('description'));
             }
         },
         
         events: {"change input" : "handleChanged"},
         
         // Handles and validates user input.
         handleChanged: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', $(e.target).prop('checked'));
             this.model.apply(this);
             this.user_invoked_update = false;
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('CheckboxView', CheckboxView);
 
     var ToggleButtonView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
                 .addClass(this.model.comm.comm_id);
 
             this.$button = $('<button />')
                 .addClass('btn')
                 .attr('type', 'button')
                 .attr('data-toggle', 'button')
                 .appendTo(this.$el);
 
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 if (this.model.get('value')) {
                     this.$button.addClass('active');
                 } else {
                     this.$button.removeClass('active');
                 }
                 this.$button.html(this.model.get('description'));
             }
         },
         
         events: {"click button" : "handleClick"},
         
         // Handles and validates user input.
         handleClick: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', ! $(e.target).hasClass('active'));
             this.model.apply(this);
             this.user_invoked_update = false;
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);
 
 });

IPython/html/static/notebook/js/widgets/container.js

@@ -1,19 +1,28 b''
 require(["notebook/js/widget"], function(){
     var ContainerModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel);
 
     var ContainerView = IPython.WidgetView.extend({
         
         render : function(){
-            this.$el.html('');
-            this.$container = $('<div />')
-                .addClass('container')
+            this.$el = $('<div />')
                 .addClass(this.model.comm.comm_id);
-            this.$el.append(this.$container);
         },
         
-        update : function(){},
+        update : function(){
+            if (this.model.get('vbox')) {
+                this.$el.addClass('vbox');
+            } else {
+                this.$el.removeClass('vbox');
+            }
+            
+            if (this.model.get('hbox')) {
+                this.$el.addClass('hbox');
+            } else {
+                this.$el.removeClass('hbox');
+            }
+        },
     });
 
     IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);
 });
  No newline at end of file

IPython/html/static/notebook/js/widgets/float_range.js

@@ -1,125 +1,126 b''
 require(["notebook/js/widget"], function(){
     var FloatRangeWidgetModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel);
 
     var FloatSliderView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
                 .addClass(this.model.comm.comm_id);
             this.$slider = $('<div />')
-                            .slider({})
-                            .addClass('slider');
+                .slider({})
+                .addClass('slider');
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
-                                    .css('padding-top', '4px')
-                                    .css('padding-bottom', '4px')
-                                    .append(this.$slider);    
+                .css('padding-top', '4px')
+                .css('padding-bottom', '4px')
+                .append(this.$slider);    
             this.$el.append(this.$slider_container);
             
             // Set defaults.
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             // Slider related keys.
             var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
             for (var index in _keys) {
                 var key = _keys[index];
                 if (this.model.get(key) != undefined) {
                     this.$slider.slider("option", key, this.model.get(key));
                 }
             }
         },
         
         // Handles: User input
         events: { "slide" : "handleSliderChange" }, 
         handleSliderChange: function(e, ui) { 
             this.model.set('value', ui.value); 
             this.model.apply(this);
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
 
 
     var FloatTextView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             var value = this.model.get('value');
             if (!this.changing && parseFloat(this.$textbox.val()) != value) {
                 this.$textbox.val(value);
             }
             
             if (this.model.get('disabled')) {
                 this.$textbox.attr('disabled','disabled');
             } else {
                 this.$textbox.removeAttr('disabled');
             }
         },
         
         
         events: {"keyup input" : "handleChanging",
                 "paste input" : "handleChanging",
                 "cut input" : "handleChanging",
                 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             
             // Try to parse value as a float.
             var numericalValue = 0.0;
             if (e.target.value != '') {
                 numericalValue = parseFloat(e.target.value);
             }
             
             // If parse failed, reset value to value stored in model.
             if (isNaN(numericalValue)) {
                 e.target.value = this.model.get('value');
             } else if (!isNaN(numericalValue)) {
                 if (this.model.get('max') != undefined) {
                     numericalValue = Math.min(this.model.get('max'), numericalValue);
                 }
                 if (this.model.get('min') != undefined) {
                     numericalValue = Math.max(this.model.get('min'), numericalValue);
                 }
 
                 // Apply the value if it has changed.
                 if (numericalValue != this.model.get('value')) {
                     this.changing = true;
                     this.model.set('value', numericalValue);
                     this.model.apply(this);
                     this.changing = false;
                 }
             }
         },
         
         // Applies validated input.
         handleChanged: function(e) { 
             // Update the textbox
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         }
     });
 
     IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView);
 });

IPython/html/static/notebook/js/widgets/int_range.js

@@ -1,123 +1,125 b''
 require(["notebook/js/widget"], function(){
     var IntRangeWidgetModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel);
 
     var IntSliderView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
-            this.$el.html('');
+            this.$el
+                .html('')
             this.$slider = $('<div />')
-                            .slider({})
-                            .addClass('slider');
+                .slider({})
+                .addClass('slider');
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
-                                    .css('padding-top', '4px')
-                                    .css('padding-bottom', '4px')
-                                    .addClass(this.model.comm.comm_id)
-                                    .append(this.$slider);    
+                .css('padding-top', '4px')
+                .css('padding-bottom', '4px')
+                .addClass(this.model.comm.comm_id)
+                .append(this.$slider);    
             this.$el.append(this.$slider_container);
             
             // Set defaults.
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             // Slider related keys.
             var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
             for (var index in _keys) {
                 var key = _keys[index];
                 if (this.model.get(key) != undefined) {
                     this.$slider.slider("option", key, this.model.get(key));
                 }
             }
         },
         
         // Handles: User input
         events: { "slide" : "handleSliderChange" }, 
         handleSliderChange: function(e, ui) { 
             this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel
             this.model.apply(this);
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView);
 
     var IntTextView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             var value = this.model.get('value');
             if (!this.changing && parseInt(this.$textbox.val()) != value) {
                 this.$textbox.val(value);
             }
             
             if (this.model.get('disabled')) {
                 this.$textbox.attr('disabled','disabled');
             } else {
                 this.$textbox.removeAttr('disabled');
             }
         },
         
         
         events: {"keyup input" : "handleChanging",
                 "paste input" : "handleChanging",
                 "cut input" : "handleChanging",
                 "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             
             // Try to parse value as a float.
             var numericalValue = 0;
             if (e.target.value != '') {
                 numericalValue = parseInt(e.target.value);
             }
             
             // If parse failed, reset value to value stored in model.
             if (isNaN(numericalValue)) {
                 e.target.value = this.model.get('value');
             } else if (!isNaN(numericalValue)) {
                 if (this.model.get('max') != undefined) {
                     numericalValue = Math.min(this.model.get('max'), numericalValue);
                 }
                 if (this.model.get('min') != undefined) {
                     numericalValue = Math.max(this.model.get('min'), numericalValue);
                 }
                 
                 // Apply the value if it has changed.
                 if (numericalValue != this.model.get('value')) {
                     this.changing = true;
                     this.model.set('value', numericalValue);
                     this.model.apply(this);
                     this.changing = false;
                 }
             }
         },
         
         // Applies validated input.
         handleChanged: function(e) { 
             // Update the textbox
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         }
     });
 
     IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView);
 });

IPython/html/static/notebook/js/widgets/selection.js

@@ -1,196 +1,202 b''
 require(["notebook/js/widget"], function(){
     var SelectionWidgetModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
 
     var DropdownView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$buttongroup = $('<div />')
+                                .addClass('widget_item')
                                 .addClass('btn-group')
                                 .appendTo(this.$el);
             this.$droplabel = $('<button />')
                                 .addClass('btn')
                                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                                 .addClass('btn')
                                 .addClass('dropdown-toggle')
                                 .attr('data-toggle', 'dropdown')
                                 .html('<span class="caret"></span>')
                                 .appendTo(this.$buttongroup);
             this.$droplist = $('<ul />')
                                 .addClass('dropdown-menu')
                                 .appendTo(this.$buttongroup);
             
             // Set defaults.
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             this.$droplabel.html(this.model.get('value'));
             
             var items = this.model.get('values');
             this.$droplist.html('');
             for (var index in items) {
                 var that = this;
                 var item_button = $('<a href="#"/>')
                     .html(items[index])
                     .on('click', function(e){
                         that.model.set('value', $(e.target).html(), this );
+                        that.model.apply(that);
                     })
                 
                 this.$droplist.append($('<li />').append(item_button))
             }
             
             if (this.model.get('disabled')) {
                 this.$buttongroup.attr('disabled','disabled');
                 this.$droplabel.attr('disabled','disabled');
                 this.$dropbutton.attr('disabled','disabled');
                 this.$droplist.attr('disabled','disabled');
             } else {
                 this.$buttongroup.removeAttr('disabled');
                 this.$droplabel.removeAttr('disabled');
                 this.$dropbutton.removeAttr('disabled');
                 this.$droplist.removeAttr('disabled');
             }
         },
         
     });
 
     IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
 
     var RadioButtonsView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             
             // Add missing items to the DOM.
             var items = this.model.get('values');
             for (var index in items) {
                 var item_query = ' :input[value="' + items[index] + '"]';
                 if (this.$el.find(item_query).length == 0) {
                     var $label = $('<label />')
                         .addClass('radio')
                         .html(items[index])
                         .appendTo(this.$el);
                     
                     var that = this;
                     $('<input />')
                         .attr('type', 'radio')
                         .addClass(this.model)
                         .val(items[index])
                         .prependTo($label)
                         .on('click', function(e){
                             that.model.set('value', $(e.target).val(), this);
                             that.model.apply();
                         });
                 }
                 
                 if (this.model.get('value') == items[index]) {
                     this.$el.find(item_query).prop('checked', true);
                 } else {
                     this.$el.find(item_query).prop('checked', false);
                 }
             }
             
             // Remove items that no longer exist.
             this.$el.find('input').each(function(i, obj) {
                 var value = $(obj).val();
                 var found = false;
                 for (var index in items) {
                     if (items[index] == value) {
                         found = true;
                         break;
                     }
                 }
                 
                 if (!found) {
                     $(obj).parent().remove();
                 }
             });
         },
         
     });
 
     IPython.notebook.widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
 
 
     var ToggleButtonsView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$buttongroup = $('<div />')
+                .addClass('widget_item')
                 .addClass('btn-group')
                 .attr('data-toggle', 'buttons-radio')
                 .appendTo(this.$el);
             this.update();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             
             // Add missing items to the DOM.
             var items = this.model.get('values');
             for (var index in items) {
                 var item_query = ' :contains("' + items[index] + '")';
                 if (this.$buttongroup.find(item_query).length == 0) {
                     
                     var that = this;
                     $('<button />')
                         .attr('type', 'button')
                         .addClass('btn')
                         .html(items[index])
                         .appendTo(this.$buttongroup)
                         .on('click', function(e){
                             that.model.set('value', $(e.target).html(), this);
                             that.model.apply();
                         });
                 }
                 
                 if (this.model.get('value') == items[index]) {
                     this.$buttongroup.find(item_query).addClass('active');
                 } else {
                     this.$buttongroup.find(item_query).removeClass('active');
                 }
             }
             
             // Remove items that no longer exist.
             this.$buttongroup.find('button').each(function(i, obj) {
                 var value = $(obj).html();
                 var found = false;
                 for (var index in items) {
                     if (items[index] == value) {
                         found = true;
                         break;
                     }
                 }
                 
                 if (!found) {
                     $(obj).remove();
                 }
             });
         },
         
     });
 
     IPython.notebook.widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
 });

IPython/html/static/notebook/js/widgets/string.js

@@ -1,98 +1,98 b''
 require(["notebook/js/widget"], function(){
     var StringWidgetModel = IPython.WidgetModel.extend({});
     IPython.notebook.widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
 
     var LabelView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
-            this.$el
-                .html('');
-            this.$label = $('<div />')
-                .addClass(this.model.comm.comm_id)
-                .appendTo(this.$el);
+            this.$el = $('<div />')
+                .addClass('widget_item')
+                .addClass(this.model.comm.comm_id);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
-            this.$label.html(this.model.get('value'));
+            this.$el.html(this.model.get('value'));
         },
         
     });
 
     IPython.notebook.widget_manager.register_widget_view('LabelView', LabelView);
 
     var TextareaView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$textbox = $('<textarea />')
                 .attr('rows', 5)
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 this.$textbox.val(this.model.get('value'));
             }
         },
         
         events: {"keyup textarea" : "handleChanging",
                 "paste textarea" : "handleChanging",
                 "cut textarea" : "handleChanging"},
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', e.target.value);
             this.model.apply(this);
             this.user_invoked_update = false;
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('TextareaView', TextareaView);
 
     var TextboxView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.$el
                 .html('')
+                .addClass('widget_item')
                 .addClass(this.model.comm.comm_id);
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             if (!this.user_invoked_update) {
                 this.$textbox.val(this.model.get('value'));
             }
         },
         
         events: {"keyup input" : "handleChanging",
                 "paste input" : "handleChanging",
                 "cut input" : "handleChanging"},
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', e.target.value);
             this.model.apply(this);
             this.user_invoked_update = false;
         },
     });
 
     IPython.notebook.widget_manager.register_widget_view('TextboxView', TextboxView);
 });

IPython/html/static/notebook/less/widgetarea.less

@@ -1,12 +1,25 b''
+
 div.widget_area {
     page-break-inside: avoid;
+    .vbox();
+}
+
+div.widget_hbox {
     .hbox();
 }
 
+div.widget_vbox {
+    .vbox();
+}
+
+div.widget_item {
+    display: inline-block;
+}
+
 /* This class is for the widget subarea inside the widget_area and after
    the prompt div. */
 div.widget_subarea {
     padding: 0.44em 0.4em 0.4em 1px;
     margin-left: 6px;
     .box-flex1();
 }

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

@@ -1,154 +1,169 b''
 .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
 .clearfix:after{clear:both;}
 .hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
 .input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
 .border-box-sizing{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
 .corner-all{border-radius:4px;}
 .hbox{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 .hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;}
 .vbox{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
 .vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;}
 .reverse{-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}
 .box-flex0{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;}
 .box-flex1{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 .box-flex{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 .box-flex2{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}
 .box-group1{-webkit-box-flex-group:1;-moz-box-flex-group:1;box-flex-group:1;}
 .box-group2{-webkit-box-flex-group:2;-moz-box-flex-group:2;box-flex-group:2;}
 .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;}
 .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
 .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
 div.error{margin:2em;text-align:center;}
 div.error>h1{font-size:500%;line-height:normal;}
 div.error>p{font-size:200%;line-height:normal;}
 div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;}
 .center-nav{display:inline-block;margin-bottom:-4px;}
 .alternate_upload{background-color:none;display:inline;}
 .alternate_upload.form{padding:0;margin:0;}
 .alternate_upload input.fileinput{background-color:red;position:relative;opacity:0;z-index:2;width:295px;margin-left:163px;cursor:pointer;}
 .list_toolbar{padding:5px;height:25px;line-height:25px;}
 .toolbar_info{float:left;}
 .toolbar_buttons{float:right;}
 .list_header{font-weight:bold;}
 .list_container{margin-top:16px;margin-bottom:16px;border:1px solid #ababab;border-radius:4px;}
 .list_container>div{border-bottom:1px solid #ababab;}.list_container>div:hover .list-item{background-color:red;}
 .list_container>div:last-child{border:none;}
 .list_item:hover .list_item{background-color:#ddd;}
 .item_name{line-height:24px;}
 .list_container>div>span,.list_container>div>div{padding:8px;}
 .list_item a{text-decoration:none;}
 input.nbname_input{height:15px;}
 .highlight_text{color:blue;}
 #project_name>.breadcrumb{padding:0px;margin-bottom:0px;background-color:transparent;font-weight:bold;}
 input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-bottom:0;width:60px;}
 .ansibold{font-weight:bold;}
 .ansiblack{color:black;}
 .ansired{color:darkred;}
 .ansigreen{color:darkgreen;}
 .ansiyellow{color:brown;}
 .ansiblue{color:darkblue;}
 .ansipurple{color:darkviolet;}
 .ansicyan{color:steelblue;}
 .ansigray{color:gray;}
 .ansibgblack{background-color:black;}
 .ansibgred{background-color:red;}
 .ansibggreen{background-color:green;}
 .ansibgyellow{background-color:yellow;}
 .ansibgblue{background-color:blue;}
 .ansibgpurple{background-color:magenta;}
 .ansibgcyan{background-color:cyan;}
 .ansibggray{background-color:gray;}
 div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
 div.cell.edit_mode{border-radius:4px;border:thin green solid;}
 div.cell{width:100%;padding:5px 5px 5px 0px;margin:0px;outline:none;}
 div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
 div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.prompt:empty{padding-top:0;padding-bottom:0;}
 div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.input_prompt{color:navy;border-top:1px solid transparent;}
 .CodeMirror{line-height:1.231em;height:auto;background:none;}
 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto;}
 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden;}}.CodeMirror-lines{padding:0.4em;}
 .CodeMirror-linenumber{padding:0 8px 0 4px;}
 .CodeMirror-gutters{border-bottom-left-radius:4px;border-top-left-radius:4px;}
 .CodeMirror pre{padding:0;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
 pre code{display:block;padding:0.5em;}
 .highlight-base,pre code,pre .subst,pre .tag .title,pre .lisp .title,pre .clojure .built_in,pre .nginx .title{color:black;}
 .highlight-string,pre .string,pre .constant,pre .parent,pre .tag .value,pre .rules .value,pre .rules .value .number,pre .preprocessor,pre .ruby .symbol,pre .ruby .symbol .string,pre .aggregate,pre .template_tag,pre .django .variable,pre .smalltalk .class,pre .addition,pre .flow,pre .stream,pre .bash .variable,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .tex .special,pre .erlang_repl .function_or_atom,pre .markdown .header{color:#BA2121;}
 .highlight-comment,pre .comment,pre .annotation,pre .template_comment,pre .diff .header,pre .chunk,pre .markdown .blockquote{color:#408080;font-style:italic;}
 .highlight-number,pre .number,pre .date,pre .regexp,pre .literal,pre .smalltalk .symbol,pre .smalltalk .char,pre .go .constant,pre .change,pre .markdown .bullet,pre .markdown .link_url{color:#080;}
 pre .label,pre .javadoc,pre .ruby .string,pre .decorator,pre .filter .argument,pre .localvars,pre .array,pre .attr_selector,pre .important,pre .pseudo,pre .pi,pre .doctype,pre .deletion,pre .envvar,pre .shebang,pre .apache .sqbracket,pre .nginx .built_in,pre .tex .formula,pre .erlang_repl .reserved,pre .prompt,pre .markdown .link_label,pre .vhdl .attribute,pre .clojure .attribute,pre .coffeescript .property{color:#8888ff;}
 .highlight-keyword,pre .keyword,pre .id,pre .phpdoc,pre .aggregate,pre .css .tag,pre .javadoctag,pre .phpdoc,pre .yardoctag,pre .smalltalk .class,pre .winutils,pre .bash .variable,pre .apache .tag,pre .go .typename,pre .tex .command,pre .markdown .strong,pre .request,pre .status{color:#008000;font-weight:bold;}
 .highlight-builtin,pre .built_in{color:#008000;}
 pre .markdown .emphasis{font-style:italic;}
 pre .nginx .built_in{font-weight:normal;}
 pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5;}
 .cm-s-ipython span.cm-variable{color:black;}
 .cm-s-ipython span.cm-keyword{color:#008000;font-weight:bold;}
 .cm-s-ipython span.cm-number{color:#080;}
 .cm-s-ipython span.cm-comment{color:#408080;font-style:italic;}
 .cm-s-ipython span.cm-string{color:#BA2121;}
 .cm-s-ipython span.cm-builtin{color:#008000;}
 .cm-s-ipython span.cm-error{color:#f00;}
 .cm-s-ipython span.cm-operator{color:#AA22FF;font-weight:bold;}
 .cm-s-ipython span.cm-meta{color:#AA22FF;}
 .cm-s-ipython span.cm-tab{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);background-position:right;background-repeat:no-repeat;}
 div.output_wrapper{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
 div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
 div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
 div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
 div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);}
 div.output_prompt{color:darkred;}
 div.output_area{padding:0px;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}div.output_area .MathJax_Display{text-align:left !important;}
 div.output_area .rendered_html table{margin-left:0;margin-right:0;}
 div.output_area .rendered_html img{margin-left:0;margin-right:0;}
 .output{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
 div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit;}
 div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
 div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left;}
 div.output_javascript:empty{padding:0;}
 .js-error{color:darkred;}
 div.raw_input{padding-top:0px;padding-bottom:0px;height:1em;line-height:1em;font-family:monospace;}
 span.input_prompt{font-family:inherit;}
 input.raw_input{font-family:inherit;font-size:inherit;color:inherit;width:auto;margin:-2px 0px 0px 1px;padding-left:1px;padding-top:2px;height:1em;}
 p.p-space{margin-bottom:10px;}
 .rendered_html{color:black;}.rendered_html em{font-style:italic;}
 .rendered_html strong{font-weight:bold;}
 .rendered_html u{text-decoration:underline;}
 .rendered_html :link{text-decoration:underline;}
 .rendered_html :visited{text-decoration:underline;}
 .rendered_html h1{font-size:197%;margin:.65em 0;font-weight:bold;}
 .rendered_html h2{font-size:153.9%;margin:.75em 0;font-weight:bold;}
 .rendered_html h3{font-size:123.1%;margin:.85em 0;font-weight:bold;}
 .rendered_html h4{font-size:100%;margin:0.95em 0;font-weight:bold;}
 .rendered_html h5{font-size:85%;margin:1.5em 0;font-weight:bold;}
 .rendered_html h6{font-size:77%;margin:1.65em 0;font-weight:bold;}
 .rendered_html ul{list-style:disc;margin:1em 2em;}
 .rendered_html ul ul{list-style:square;margin:0em 2em;}
 .rendered_html ul ul ul{list-style:circle;margin:0em 2em;}
 .rendered_html ol{list-style:decimal;margin:1em 2em;}
 .rendered_html ol ol{list-style:upper-alpha;margin:0em 2em;}
 .rendered_html ol ol ol{list-style:lower-alpha;margin:0em 2em;}
 .rendered_html ol ol ol ol{list-style:lower-roman;margin:0em 2em;}
 .rendered_html ol ol ol ol ol{list-style:decimal;margin:0em 2em;}
 .rendered_html hr{color:black;background-color:black;}
 .rendered_html pre{margin:1em 2em;}
 .rendered_html pre,.rendered_html code{border:0;background-color:#ffffff;color:#000000;font-size:100%;padding:0px;}
 .rendered_html blockquote{margin:1em 2em;}
 .rendered_html table{margin-left:auto;margin-right:auto;border:1px solid black;border-collapse:collapse;}
 .rendered_html tr,.rendered_html th,.rendered_html td{border:1px solid black;border-collapse:collapse;margin:1em 2em;}
 .rendered_html td,.rendered_html th{text-align:left;vertical-align:middle;padding:4px;}
 .rendered_html th{font-weight:bold;}
 .rendered_html p{text-align:justify;}
 .rendered_html img{display:block;margin-left:auto;margin-right:auto;}
 .rendered_html *+p{margin-top:1em;}
 .rendered_html *+table{margin-top:1em;}
 .rendered_html *+img{margin-top:1em;}
 div.text_cell{padding:5px 5px 5px 0px;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
 a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
+.toolbar{padding:0px 10px;margin-top:-5px;}.toolbar select,.toolbar label{width:auto;height:26px;vertical-align:middle;margin-right:2px;margin-bottom:0px;display:inline;font-size:92%;margin-left:0.3em;margin-right:0.3em;padding:0px;padding-top:3px;}
+.toolbar .btn{padding:2px 8px;}
+.toolbar .btn-group{margin-top:0px;}
+.toolbar-inner{border:none !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;}
+#maintoolbar{margin-bottom:0px;}
+@-moz-keyframes fadeOut{from{opacity:1;} to{opacity:0;}}@-webkit-keyframes fadeOut{from{opacity:1;} to{opacity:0;}}@-moz-keyframes fadeIn{from{opacity:0;} to{opacity:1;}}@-webkit-keyframes fadeIn{from{opacity:0;} to{opacity:1;}}.bigtooltip{overflow:auto;height:200px;-webkit-transition-property:height;-webkit-transition-duration:500ms;-moz-transition-property:height;-moz-transition-duration:500ms;transition-property:height;transition-duration:500ms;}
+.smalltooltip{-webkit-transition-property:height;-webkit-transition-duration:500ms;-moz-transition-property:height;-moz-transition-duration:500ms;transition-property:height;transition-duration:500ms;text-overflow:ellipsis;overflow:hidden;height:80px;}
+.tooltipbuttons{position:absolute;padding-right:15px;top:0px;right:0px;}
+.tooltiptext{padding-right:30px;}
+.ipython_tooltip{max-width:700px;-webkit-animation:fadeOut 400ms;-moz-animation:fadeOut 400ms;animation:fadeOut 400ms;-webkit-animation:fadeIn 400ms;-moz-animation:fadeIn 400ms;animation:fadeIn 400ms;vertical-align:middle;background-color:#f7f7f7;overflow:visible;border:#ababab 1px solid;outline:none;padding:3px;margin:0px;padding-left:7px;font-family:monospace;min-height:50px;-moz-box-shadow:0px 6px 10px -1px #adadad;-webkit-box-shadow:0px 6px 10px -1px #adadad;box-shadow:0px 6px 10px -1px #adadad;border-radius:4px;position:absolute;z-index:2;}.ipython_tooltip a{float:right;}
+.ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
+.pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
+.pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
+div.widget_area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
+div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}

IPython/html/widgets/widget_container.py

@@ -1,7 +1,10 b''
 from base import Widget
-from IPython.utils.traitlets import Unicode
+from IPython.utils.traitlets import Unicode, Bool
 
 class ContainerWidget(Widget):
     target_name = Unicode('container_widget')
     default_view_name = Unicode('ContainerView')
-    
  No newline at end of file
+    _keys = ['vbox', 'hbox']
+
+    hbox = Bool(True)
+    vbox = Bool(False)
  No newline at end of file