From 03ea8efc2620e166c45a862abaebb49a6695e8cc 2013-02-10 12:35:29
From: Bussonnier Matthias <bussonniermatthias@gmail.com>
Date: 2013-02-10 12:35:29
Subject: [PATCH] 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.
---

diff --git a/IPython/frontend/html/notebook/static/css/celltoolbar.css b/IPython/frontend/html/notebook/static/css/celltoolbar.css
index f3320a6..c008f59 100644
--- a/IPython/frontend/html/notebook/static/css/celltoolbar.css
+++ b/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;
 }
-
diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index f85688c..79a83e7 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/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);
     };
 
 
diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js
index cadc3c0..9d41eed 100644
--- a/IPython/frontend/html/notebook/static/js/codecell.js
+++ b/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;