Merge pull request #2876 from Carreau/fixctff

fix celltoolbar layout on FF

Ok, bug was due to an extra empty div... This seem to lok ok on both FF and Chrome OS X.

Think of adding 
$.getScript('/static/js/celltoolbarpresets/example.js')

to your custom.js to fully test.

IPython/frontend/html/notebook/static/css/celltoolbar.css

@@ -3,21 +3,15 @@
 
 .celltoolbar {
     border: thin solid #CFCFCF;
-    margin-left: 0px;
     border-bottom: none;
-        margin:0;
-    padding:0;
     background : #EEE;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
+    width:100%;
+    -webkit-box-pack: end;
+    height:20px;
 }
 
-.celltoolbar div{
-    line-height: 0;
-    margin:0;
-    padding:0;
-  }
-
 
 .no_input_radius {
     border-top-right-radius: 0px;
@@ -33,12 +27,19 @@
 }
 
 .ctb_hideshow {
-    display: none;
+    display:none;
+    vertical-align:bottom;
+    padding-right: 2px;
+}
+
+.celltoolbar > div {
+   padding-top: 0px;
 }
 
 .ctb_area {
     margin:0;
     padding:0;
+    width:100%;
 
 }
 
@@ -47,10 +48,10 @@
 all or one cell's toolbars.
 */
 .ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow {
-    display: block;
+    display:block;
 }
 
-.ctb_show .ctb_hideshow + div > div.input_area,
+.ctb_show .input_area,
 .ctb_show .ctb_hideshow + div.text_cell_input {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
@@ -62,28 +63,32 @@ all or one cell's toolbars.
 }
 
 .button_container {
-    float: right;
-    padding-bottom: 1px;
+    margin-top:0;
+    margin-bottom:0;
 }
 
-.button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
-    border-radius : 0 0 0 0;
-    border : none;
-}
 
+.ui-button {
+    min-width:30px;
+}
 .celltoolbar .button_container select {
     margin: 10px;
-    margin-top: 0px;
+    margin-top: 1px;
     margin-bottom: 0px;
+    padding:0;
     font-size: 87%;
-    height:18px;
-    display:inline;
     width:auto;
+    display:inline-block;
+    height:18px;
+    line-height:18px;
+    vertical-align:top;
 }
 
 .celltoolbar label{
-    display:inline;
-    line-height:13px;
+    display:inline-block;
+    height:15px;
+    line-height:15px;
+    vertical-align:top;
 }
 
 .celltoolbar label span {
@@ -97,7 +102,8 @@ all or one cell's toolbars.
 }
 
 
-.celltoolbar ui-button {
+.celltoolbar .ui-button {
     border: none;
+    vertical-align:top;
+    height:20px;
 }
-

IPython/frontend/html/notebook/static/js/celltoolbar.js

@@ -34,15 +34,9 @@ var IPython = (function (IPython) {
 
 
     CellToolbar.prototype.create_element = function () {
-        this.inner_element = $('<div/>');
-        var ctb_element = $('<div/>').addClass('celltoolbar')
-            .append(this.inner_element);
-        ctb_element.addClass('box-flex1');
-        var ctb_area = $('<div/>').addClass('ctb_area hbox');
-        var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt');
-        ctb_area.append(ctb_prompt).append(ctb_element);
+        this.inner_element = $('<div/>').addClass('celltoolbar hbox reverse')
         this.element = $('<div/>').addClass('ctb_hideshow')
-            .append(ctb_area);
+            .append(this.inner_element);
     };
 
 

IPython/frontend/html/notebook/static/js/codecell.js

@@ -64,11 +64,12 @@ var IPython = (function (IPython) {
         cell.attr('tabindex','2');
 
         this.celltoolbar = new IPython.CellToolbar(this);
-        cell.append(this.celltoolbar.element);
 
         var input = $('<div></div>').addClass('input hbox');
+        var vbox = $('<div/>').addClass('vbox box-flex1')
         input.append($('<div/>').addClass('prompt input_prompt'));
-        var input_area = $('<div/>').addClass('input_area box-flex1');
+        vbox.append(this.celltoolbar.element);
+        var input_area = $('<div/>').addClass('input_area');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: 'python',
@@ -78,7 +79,8 @@ var IPython = (function (IPython) {
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this),
             matchBrackets: true
         });
-        input.append(input_area);
+        vbox.append(input_area);
+        input.append(vbox);
         var output = $('<div></div>');
         cell.append(input).append(output);
         this.element = cell;