Fixed vertical widget labels

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

@@ -11,7 +11,7 b' require(["notebook/js/widget"], function(){'
             this.$el = $('<div />')
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')

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

@@ -11,7 +11,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$slider = $('<div />')
                 .slider({})
@@ -46,14 +46,21 b' require(["notebook/js/widget"], function(){'
                     .addClass('widget-vslider');
                 this.$el
                     .removeClass('widget-hbox-single')
-                    .addClass('widget-hbox-vsingle');
+                    .addClass('widget-vbox-single');
+                this.$label
+                    .removeClass('widget-hlabel')
+                    .addClass('widget-vlabel');
+
             } else {
                 this.$slider_container
                     .removeClass('widget-vslider')
                     .addClass('widget-hslider');
                 this.$el
-                    .removeClass('widget-hbox-vsingle')
+                    .removeClass('widget-vbox-single')
                     .addClass('widget-hbox-single');
+                this.$label
+                    .removeClass('widget-vlabel')
+                    .addClass('widget-hlabel');
             }
 
             var description = this.model.get('description');
@@ -86,7 +93,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')

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

@@ -11,7 +11,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$slider = $('<div />')
                 .slider({})
@@ -46,14 +46,21 b' require(["notebook/js/widget"], function(){'
                     .addClass('widget-vslider');
                 this.$el
                     .removeClass('widget-hbox-single')
-                    .addClass('widget-hbox-vsingle');
+                    .addClass('widget-vbox-single');
+                this.$label
+                    .removeClass('widget-hlabel')
+                    .addClass('widget-vlabel');
+
             } else {
                 this.$slider_container
                     .removeClass('widget-vslider')
                     .addClass('widget-hslider');
                 this.$el
-                    .removeClass('widget-hbox-vsingle')
+                    .removeClass('widget-vbox-single')
                     .addClass('widget-hbox-single');
+                this.$label
+                    .removeClass('widget-vlabel')
+                    .addClass('widget-hlabel');
             }
 
             var description = this.model.get('description');
@@ -85,7 +92,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')

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

@@ -12,7 +12,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$buttongroup = $('<div />')
                                 .addClass('widget_item')
@@ -90,7 +90,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$container = $('<div />')
                 .appendTo(this.$el)
@@ -172,7 +172,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('btn-group')

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

@@ -30,7 +30,7 b' require(["notebook/js/widget"], function(){'
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<textarea />')
                 .attr('rows', 5)
@@ -79,7 +79,7 b' require(["notebook/js/widget"], function(){'
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
-                .addClass('widget-label')
+                .addClass('widget-hlabel')
                 .appendTo(this.$el)
                 .hide();
             this.$textbox = $('<input type="text" />')

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

@@ -10,7 +10,7 b''
         .vbox();
         .box-flex2();
 
-        .widget-label {
+        .widget-hlabel {
             min-width: 10ex;
             padding-right: 8px;
             text-align: right;
@@ -18,6 +18,12 b''
             padding-top: 3px;
         }
 
+        .widget-vlabel {
+            text-align: center;
+            vertical-align: text-bottom;
+            padding-bottom: 5px;
+        }
+
         .widget-hslider {
             padding-left: 8px;
             padding-right: 5px;
@@ -47,18 +53,18 b''
         .widget-vslider {
             border: 1px solid #CCCCCC;
             background: #FFFFFF;
-            height: 100%;
             width: 5px;
             margin-left: 12px;
             padding-bottom: 14px;
             .corner-all();
+            height: 250px;
 
             .ui-slider {
                 border: 0px !important;
                 background: none !important;
                 margin-left: -4px;
-                height: 100%;
                 margin-top: 5px;
+                height: 100%;
 
                 .ui-slider-handle {
                     width: 28px !important;
@@ -86,22 +92,26 b''
             .border-box-sizing();
         }
 
-        .widget-hbox {
-            .hbox();
+        .widget-box {
             .start();
             .widget-container();
             margin: 5px;
         }
 
+        .widget-hbox {
+            .widget-box();
+            .hbox();
+        }
+
         .widget-hbox-single {
             .widget-hbox();
             height: 30px;
         }
 
-        .widget-hbox-vsingle {
-            .widget-hbox();
+        .widget-vbox-single {
+            .widget-box();
+            .vbox();
             width: 30px;
-            height: 250px;
         }
     }
 }

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

@@ -166,10 +166,12 b' h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch'
 .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);}
 .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;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-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%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}.widget-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;}
-.widget-area .widget-subarea .widget-slider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-slider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-slider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;}
+.widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;}
+.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;}
 .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;}
 .widget-area .widget-subarea .widget-numeric-text{width:150px;}
 .widget-area .widget-subarea .widget-combo-btn{min-width:138px;height:30px;}
-.widget-area .widget-subarea .widget-container{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
-.widget-area .widget-subarea .widget-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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;}
-.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;height:30px;}
+.widget-area .widget-subarea .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.widget-area .widget-subarea .widget-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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;}
+.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;height:30px;}
+.widget-area .widget-subarea .widget-hbox-vsingle{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;width:30px;height:250px;}

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

@@ -1585,10 +1585,12 b' span#checkpoint_status,span#autosave_status{font-size:small;}'
 .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);}
 .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;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-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%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}.widget-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;}
-.widget-area .widget-subarea .widget-slider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-slider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-slider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;}
+.widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;}
+.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;}
 .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;}
 .widget-area .widget-subarea .widget-numeric-text{width:150px;}
 .widget-area .widget-subarea .widget-combo-btn{min-width:138px;height:30px;}
-.widget-area .widget-subarea .widget-container{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
-.widget-area .widget-subarea .widget-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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;}
-.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:5px;margin-top:5px;height:30px;}
+.widget-area .widget-subarea .widget-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.widget-area .widget-subarea .widget-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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;}
+.widget-area .widget-subarea .widget-hbox-single{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;height:30px;}
+.widget-area .widget-subarea .widget-hbox-vsingle{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;-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:5px;width:30px;height:250px;}