Added slider vertical mode, and

fixed hbox element sizing.

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

@@ -19,7 +19,7 b' require(["notebook/js/widget"], function(){'
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
-                .addClass('widget-slider')
+                .addClass('widget-hslider')
                 .append(this.$slider);    
             this.$el.append(this.$slider_container);
             
@@ -39,6 +39,23 b' require(["notebook/js/widget"], function(){'
                 }
             }
 
+            var orientation = this.model.get('orientation');
+            if (orientation=='vertical') {
+                this.$slider_container
+                    .removeClass('widget-hslider')
+                    .addClass('widget-vslider');
+                this.$el
+                    .removeClass('widget-hbox-single')
+                    .addClass('widget-hbox-vsingle');
+            } else {
+                this.$slider_container
+                    .removeClass('widget-vslider')
+                    .addClass('widget-hslider');
+                this.$el
+                    .removeClass('widget-hbox-vsingle')
+                    .addClass('widget-hbox-single');
+            }
+
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();

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

@@ -19,7 +19,7 b' require(["notebook/js/widget"], function(){'
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
-                .addClass('widget-slider')
+                .addClass('widget-hslider')
                 .append(this.$slider);    
             this.$el.append(this.$slider_container);
             
@@ -39,6 +39,23 b' require(["notebook/js/widget"], function(){'
                 }
             }
 
+            var orientation = this.model.get('orientation');
+            if (orientation=='vertical') {
+                this.$slider_container
+                    .removeClass('widget-hslider')
+                    .addClass('widget-vslider');
+                this.$el
+                    .removeClass('widget-hbox-single')
+                    .addClass('widget-hbox-vsingle');
+            } else {
+                this.$slider_container
+                    .removeClass('widget-vslider')
+                    .addClass('widget-hslider');
+                this.$el
+                    .removeClass('widget-hbox-vsingle')
+                    .addClass('widget-hbox-single');
+            }
+
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();

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

@@ -18,7 +18,7 b''
             padding-top: 3px;
         }
 
-        .widget-slider {
+        .widget-hslider {
             padding-left: 8px;
             padding-right: 5px;
             margin-top: 11px;
@@ -44,6 +44,30 b''
             }
         }
 
+        .widget-vslider {
+            border: 1px solid #CCCCCC;
+            background: #FFFFFF;
+            height: 100%;
+            width: 5px;
+            margin-left: 12px;
+            padding-bottom: 14px;
+            .corner-all();
+
+            .ui-slider {
+                border: 0px !important;
+                background: none !important;
+                margin-left: -4px;
+                height: 100%;
+                margin-top: 5px;
+
+                .ui-slider-handle {
+                    width: 28px !important;
+                    height: 14px !important;
+                    margin-left: -15px;
+                }
+            }
+        }
+
         .widget-text {
             width: 350px;
             margin-bottom: 0px;
@@ -59,7 +83,6 b''
         }
 
         .widget-container {
-            .box-flex1();
             .border-box-sizing();
         }
 
@@ -67,13 +90,18 b''
             .hbox();
             .start();
             .widget-container();
-            margin-bottom: 5px;
-            margin-top: 5px;
+            margin: 5px;
         }
 
         .widget-hbox-single {
             .widget-hbox();
             height: 30px;
         }
+
+        .widget-hbox-vsingle {
+            .widget-hbox();
+            width: 30px;
+            height: 250px;
+        }
     }
 }

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

@@ -165,7 +165,11 b' h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch'
 .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);}
-.widget-label{min-width:300px;}
-div.widget-container{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
-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;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{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-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;}

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

@@ -1584,7 +1584,11 b' span#checkpoint_status,span#autosave_status{font-size:small;}'
 .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);}
-.widget-label{min-width:300px;}
-div.widget-container{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
-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;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{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-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;}