Merge pull request #5037 from jdfreder/ff-widget-align

FF Fix: alignment and scale of text widget

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

@@ -126,8 +126,7 b' define(["notebook/js/widgets/widget"], function(WidgetManager){'
                 .hide();
             this.$container = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-container')
-                .addClass('vbox');
+                .addClass('widget-radio-box');
             this.$el_to_style = this.$container; // Set default element to style
             this.update();
         },

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

@@ -101,6 +101,7 b''
     height     : 5px;
     max-height : 5px;
     margin-top : 11px;
+    margin-bottom: 10px;
     
     /* Style the slider track */
     .slide-track();
@@ -165,7 +166,7 b''
 .widget-text {
     /* String Textbox - used for TextBoxView and TextAreaView */
     width         : 350px;
-    margin-bottom : 0px;
+    margin : 0px !important;
 }
 
 .widget-listbox {
@@ -177,6 +178,7 b''
 .widget-numeric-text {
     /* Single Line Textbox - used for IntTextView and FloatTextView */
     width : 150px;
+    margin : 0px !important;
 }
 
 .widget-progress {
@@ -260,6 +262,14 b''
     .align-start();
 }
 
+.widget-radio-box {
+    /* Contains RadioButtonsWidget */
+    .vbox();
+    .border-box-sizing();
+    
+    padding-top: 4px;
+}
+
 .docked-widget-modal {
     /* Horizontal Label */
     overflow: hidden; 

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

@@ -177,11 +177,11 b' div.cell.text_cell.rendered{padding:0}'
 .widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
 .widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
 .slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
-.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;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;display:flex;flex-direction:row;align-items:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
+.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;margin-bottom:10px;border:1px solid #ccc;background:#fff;border-radius:4px;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;display:flex;flex-direction:row;align-items:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
 .widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;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%;display:flex;flex-direction:column;align-items:stretch}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}
-.widget-text{width:350px;margin-bottom:0}
+.widget-text{width:350px;margin:0 !important}
 .widget-listbox{width:364px;margin-bottom:0}
-.widget-numeric-text{width:150px}
+.widget-numeric-text{width:150px;margin:0 !important}
 .widget-progress{width:363px}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
 .widget-combo-btn{min-width:138px;}
 .widget-box{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
@@ -192,4 +192,5 b' div.cell.text_cell.rendered{padding:0}'
 .widget-modal{overflow:hidden;position:absolute !important;top:0;left:0;margin-left:0 !important}
 .widget-modal-body{max-height:none !important}
 .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
+.widget-radio-box{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%;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-top:4px}
 .docked-widget-modal{overflow:hidden;position:relative !important;top:0 !important;left:0 !important;margin-left:0 !important}

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

@@ -1454,11 +1454,11 b' div.cell.text_cell.rendered{padding:0}'
 .widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
 .widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
 .slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
-.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;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;display:flex;flex-direction:row;align-items:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
+.widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;margin-bottom:10px;border:1px solid #ccc;background:#fff;border-radius:4px;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;display:flex;flex-direction:row;align-items:stretch}.widget-hslider .ui-slider{border:0 !important;background:none !important;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;display:flex;flex-direction:row;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
 .widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;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%;display:flex;flex-direction:column;align-items:stretch}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}
-.widget-text{width:350px;margin-bottom:0}
+.widget-text{width:350px;margin:0 !important}
 .widget-listbox{width:364px;margin-bottom:0}
-.widget-numeric-text{width:150px}
+.widget-numeric-text{width:150px;margin:0 !important}
 .widget-progress{width:363px}.widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
 .widget-combo-btn{min-width:138px;}
 .widget-box{margin:5px;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;justify-content:flex-start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
@@ -1469,6 +1469,7 b' div.cell.text_cell.rendered{padding:0}'
 .widget-modal{overflow:hidden;position:absolute !important;top:0;left:0;margin-left:0 !important}
 .widget-modal-body{max-height:none !important}
 .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-align:start;-moz-box-align:start;box-align:start;align-items:flex-start}
+.widget-radio-box{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%;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding-top:4px}
 .docked-widget-modal{overflow:hidden;position:relative !important;top:0 !important;left:0 !important;margin-left:0 !important}
 body{background-color:#fff}
 body.notebook_app{overflow:hidden}

IPython/html/tests/widgets/widget_selection.js

@@ -8,7 +8,7 b' casper.notebook_test(function () {'
 
     var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn';
     var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]';
-    var radio_selector = '.widget-area .widget-subarea .widget-hbox .vbox';
+    var radio_selector = '.widget-area .widget-subarea .widget-hbox .widget-radio-box';
     var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox';
 
     var selection_index;