Removed max height from widget modal body

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

@@ -1,186 +1,187 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // ContainerWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widget"], function(widget_manager) {
     var ContainerModel = IPython.WidgetModel.extend({});
     widget_manager.register_widget_model('ContainerWidgetModel', ContainerModel);
 
     var ContainerView = IPython.WidgetView.extend({
         
         render: function(){
             this.$el
                 .addClass('widget-container');
         },
         
         update: function(){
 
             // Apply flexible box model properties by adding and removing
             // corrosponding CSS classes.
             // Defined in IPython/html/static/base/less/flexbox.less
             this.set_flex_property('vbox', this.model.get('_vbox'));
             this.set_flex_property('hbox', this.model.get('_hbox'));
             this.set_flex_property('start', this.model.get('_pack_start'));
             this.set_flex_property('center', this.model.get('_pack_center'));
             this.set_flex_property('end', this.model.get('_pack_end'));
             this.set_flex_property('align-start', this.model.get('_align_start'));
             this.set_flex_property('align-center', this.model.get('_align_center'));
             this.set_flex_property('align-end', this.model.get('_align_end'));
             this.set_flex_property('box-flex0', this.model.get('_flex0'));
             this.set_flex_property('box-flex1', this.model.get('_flex1'));
             this.set_flex_property('box-flex2', this.model.get('_flex2'));
 
             return IPython.WidgetView.prototype.update.call(this);
         },
 
         set_flex_property: function(property_name, enabled) {
             if (enabled) {
                 this.$el.addClass(property_name);
             } else {
                 this.$el.removeClass(property_name);
             }
         },
 
         display_child: function(view) {
             this.$el.append(view.$el);
         },
     });
 
     widget_manager.register_widget_view('ContainerView', ContainerView);
 
 
     var ModalView = IPython.WidgetView.extend({
         
         render: function(){
             var that = this;
             this.$el
                 .html('')
                 .on("remove", function(){
                     that.$window.remove();
                 });
             this.$window = $('<div />')
                 .addClass('modal widget-modal')
                 .appendTo($('#notebook-container'));
             this.$title_bar = $('<div />')
                 .addClass('popover-title')
                 .appendTo(this.$window);
             var that = this;
             $('<button />')
                 .addClass('close')
                 .html('&times;')
                 .appendTo(this.$title_bar)
                 .click(function(){
                     that.hide();
                     event.stopPropagation();
                 });
             this.$title = $('<div />')
                 .addClass('widget-modal-title')
                 .html('&nbsp;')
                 .appendTo(this.$title_bar);
             this.$body = $('<div />')
                 .addClass('modal-body')
+                .addClass('widget-modal-body')
                 .addClass('widget-container')
                 .appendTo(this.$window);
             
             this.$show_button = $('<button />')
                 .html('&nbsp;')
                 .addClass('btn btn-info widget-modal-show')
                 .appendTo(this.$el)
                 .click(function(){
                     that.show();
                 });
             
             this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
             this.$window.resizable();
             this.$window.on('resize', function(){
                 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
             })
 
             this._shown_once = false;
         },
         
         hide: function() {
             this.$window.hide();
             this.$show_button.removeClass('btn-info');
         },
         
         show: function() {
             this.$window.show();
             this.$show_button.addClass('btn-info');
             var position = this.$show_button.offset();
             this.$window.css('left', position.left + this.$show_button.outerWidth());
             this.$window.css('top', position.top);
         },
         
         update: function(){
 
             // Apply flexible box model properties by adding and removing
             // corrosponding CSS classes.
             // Defined in IPython/html/static/base/less/flexbox.less
             this.set_flex_property('vbox', this.model.get('_vbox'));
             this.set_flex_property('hbox', this.model.get('_hbox'));
             this.set_flex_property('start', this.model.get('_pack_start'));
             this.set_flex_property('center', this.model.get('_pack_center'));
             this.set_flex_property('end', this.model.get('_pack_end'));
             this.set_flex_property('align-start', this.model.get('_align_start'));
             this.set_flex_property('align-center', this.model.get('_align_center'));
             this.set_flex_property('align-end', this.model.get('_align_end'));
             this.set_flex_property('box-flex0', this.model.get('_flex0'));
             this.set_flex_property('box-flex1', this.model.get('_flex1'));
             this.set_flex_property('box-flex2', this.model.get('_flex2'));
             
             var description = this.model.get('description');
             description = description.replace(/ /g, '&nbsp;', 'm');
             description = description.replace(/\n/g, '<br>\n', 'm');
             if (description.length == 0) {
                 this.$title.html('&nbsp;'); // Preserve title height
             } else {
                 this.$title.html(description);
             }
             
             var button_text = this.model.get('button_text');
             button_text = button_text.replace(/ /g, '&nbsp;', 'm');
             button_text = button_text.replace(/\n/g, '<br>\n', 'm');
             if (button_text.length == 0) {
                 this.$show_button.html('&nbsp;'); // Preserve button height
             } else {
                 this.$show_button.html(button_text);
             }
             
             if (!this._shown_once) {
                 this._shown_once = true;
                 this.show();
             }
             
             return IPython.WidgetView.prototype.update.call(this);
         },
 
         set_flex_property: function(property_name, enabled) {
             if (enabled) {
                 this.$body.addClass(property_name);
             } else {
                 this.$body.removeClass(property_name);
             }
         },
 
         display_child: function(view) {
             this.$body.append(view.$el);
         },
         
         
     });
 
     widget_manager.register_widget_view('ModalView', ModalView);
 });

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

@@ -1,228 +1,233 b''
 
 /*
 LESS file that styles IPython notebook widgets and the area they sit in.
 
 The widget area typically looks something like this:
  +------------------------------------------+
  | widget-area                              |
  |  +--------+---------------------------+  |
  |  | prompt | widget-subarea            |  |
  |  |        | +--------+  +--------+    |  |
  |  |        | | widget |  | widget |    |  |
  |  |        | +--------+  +--------+    |  |
  |  +--------+---------------------------+  |
  +------------------------------------------+
 */
 
 .widget-area {
     page-break-inside: avoid;
     .hbox();
 
     .widget-subarea {
         padding: 0.44em 0.4em 0.4em 1px;
         margin-left: 6px;
         .border-box-sizing();
         .vbox();
         .box-flex2();
 
         /* Horizontal Label */
         .widget-hlabel {
             min-width: 10ex;
             padding-right: 8px;
             padding-top: 3px;
             text-align: right;
             vertical-align: text-top;
         }
 
         /* Vertical Label */
         .widget-vlabel {
             padding-bottom: 5px;
             text-align: center;
             vertical-align: text-bottom;
         }
 
 
         /* Slider Track */
         .slide-track {
             border: 1px solid #CCCCCC;
             background: #FFFFFF;
             .corner-all(); /* Round the corners of the slide track */
         }
 
         /* Horizontal jQuery Slider 
 
         Both the horizontal and vertical versions of the slider are characterized
         by a styled div that contains an invisible jQuery slide div which 
         contains a visible slider handle div.  This is requred so we can control
         how the slider is drawn and 'fix' the issue where the slide handle 
         doesn't stop at the end of the slide.
 
         Both horizontal and vertical sliders have this div nesting:
         +------------------------------------------+
         | widget-(h/v)slider                       |
         |  +--------+---------------------------+  |
         |  | ui-slider                          |  |
         |  |          +------------------+      |  |
         |  |          | ui-slider-handle |      |  |
         |  |          +------------------+      |  |
         |  +--------+---------------------------+  |
         +------------------------------------------+
         */
         .widget-hslider {
 
             /* Fix the padding of the slide track so the ui-slider is sized 
             correctly. */
             padding-left: 8px;
             padding-right: 5px;
             overflow: visible;
 
             /* Default size of the slider */
             width: 348px; 
             height: 5px;
             max-height: 5px;
             margin-top: 11px;
             
             /* Style the slider track */
             .slide-track();
 
             /* Make the div a flex box (makes FF behave correctly). */
             .hbox();
 
             /* Inner, invisible slide div */
             .ui-slider {
                 border: 0px !important;
                 background: none !important;
                 
                 .hbox();
                 .box-flex1();
 
                 .ui-slider-handle {
                     width: 14px !important;
                     height: 28px !important;
 
                     margin-top: -8px !important;
                 }
             }
         }
 
         /* Vertical jQuery Slider */
         .widget-vslider {
             
             /* Fix the padding of the slide track so the ui-slider is sized 
             correctly. */
             padding-bottom: 8px;
             overflow: visible; 
 
             /* Default size of the slider */
             width: 5px;
             max-width: 5px;
             height: 250px;
             margin-left: 12px;
             
             /* Style the slider track */
             .slide-track();
 
             /* Make the div a flex box (makes FF behave correctly). */
             .vbox();
             
             /* Inner, invisible slide div */
             .ui-slider {
                 border: 0px !important;
                 background: none !important;
                 margin-left: -4px;
                 margin-top: 5px;
                 
                 .vbox();
                 .box-flex1();
 
                 .ui-slider-handle {
                     width: 28px !important;
                     height: 14px !important;
                     margin-left: -9px;
                 }
             }
         }
 
         /* String Textbox - used for TextBoxView and TextAreaView */
         .widget-text {
             width: 350px;
             margin-bottom: 0px;
         }
 
         /* Listbox */
         .widget-listbox {
             width: 364px;
             margin-bottom: 0px;
         }
 
         /* Single Line Textbox - used for IntTextView and FloatTextView */
         .widget-numeric-text {
             width: 150px;
         }
 
         /* Progress Bar */
         .widget-progress {
             width: 363px;
 
             /* Disable progress bar animation */
             .bar {
                 -webkit-transition: none;
                 -moz-transition: none;
                 -ms-transition: none;
                 -o-transition: none;
                 transition: none;
             }
         }
 
         /* ComboBox Main Button */
         .widget-combo-btn {
             min-width: 138px; /* + 26px drop arrow btn = 164px */
         }
 
         /* The following section sets the style for the invisible div that
         hold widgets and their accompanying labels.
 
         Looks like this:
         +-----------------------------+
         | widget-box (or similar)     |
         |  +-------+---------------+  |
         |  | Label | Actual Widget |  |
         |  +-------+---------------+  |
         +-----------------------------+
         */
         .widget-box {
             .start();
             .widget-container();
             margin: 5px;
         }
         .widget-hbox { /* Horizontal widgets */
             .widget-box();
             .hbox();
         }
         .widget-hbox-single { /* Single line horizontal widgets */
             .widget-hbox();
             height: 30px;
         }
         .widget-vbox-single { /* For vertical slides */
             .widget-box();
             .vbox();
             width: 30px;
         }
     }
 }
 
 /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */
 
 /* ContainerWidget - ModalView */
 .widget-modal {
     overflow: hidden; 
     position: absolute !important;
     top: 0px; 
     left: 0px; 
     margin-left: 0px !important;
 }
 
+/* ContainerWidget - ModalView Body */
+.widget-modal-body {
+    max-height: none !important;
+}
+
 /* ContainerWidget */
 .widget-container {
     .border-box-sizing();
 }
  No newline at end of file