浏览代码

[notebook] Fix snippet settings positioning

The settings panel was floated with some odd margins, sometimes making it flicker into position with a busy browser. The z-index was also lower than the add snippet wheel, putting the wheel on top of the panel.
Johan Ahlen 10 年之前
父节点
当前提交
7e1a6ad

+ 0 - 2
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -108,8 +108,6 @@ body {
 }
 }
 
 
 .snippet-settings {
 .snippet-settings {
-  width: 200%;
-  margin-left: -100%;
   background-color: #FFF;
   background-color: #FFF;
   border-left: 1px solid #e5e5e5;
   border-left: 1px solid #e5e5e5;
   border-right: 1px solid #e5e5e5;
   border-right: 1px solid #e5e5e5;

+ 7 - 9
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -380,17 +380,15 @@ ${ require.config() }
 
 
       </h2>
       </h2>
 
 
-      <div>
-        <div style="float: left; width: 50%">
-          <div class="snippet-body" style="position: relative; z-index: 90;">
-            <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'code-editor-snippet-body' } --><!-- /ko -->
-            <!-- ko template: { if: type() == 'text', name: 'text-snippet-body' } --><!-- /ko -->
-            <!-- ko template: { if: type() == 'markdown', name: 'markdown-snippet-body' } --><!-- /ko -->
-            <!-- ko template: { if: type() == 'jar' || type() == 'py', name: 'executable-snippet-body' } --><!-- /ko -->
-          </div>
+      <div style="position: relative;">
+        <div class="snippet-body" style="position: relative; z-index: 90;">
+          <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'code-editor-snippet-body' } --><!-- /ko -->
+          <!-- ko template: { if: type() == 'text', name: 'text-snippet-body' } --><!-- /ko -->
+          <!-- ko template: { if: type() == 'markdown', name: 'markdown-snippet-body' } --><!-- /ko -->
+          <!-- ko template: { if: type() == 'jar' || type() == 'py', name: 'executable-snippet-body' } --><!-- /ko -->
         </div>
         </div>
 
 
-        <div style="float: left; width: 50%">
+        <div style="position: absolute; top:0; z-index: 301; width: 100%;">
           <!-- ko template: 'snippet-settings' --><!-- /ko -->
           <!-- ko template: 'snippet-settings' --><!-- /ko -->
         </div>
         </div>