fix CodeMirror editor scrolling

grails-samples · Feb 25, 2015 · 6cc8d4a · 6cc8d4a
1 parent 45c0159
commit 6cc8d4a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 46 deletions.
diff --git a/grails-app/assets/javascripts/wiki-editor.js b/grails-app/assets/javascripts/wiki-editor.js
@@ -7,7 +7,8 @@ $(document).ready(function() {
         lineWrapping: true,
         gutter: true,
         fixedGutter: true,
-        autofocus: true
+        autofocus: true,
+        scrollbarStyle: "overlay"
     });
 
     // store editor so it can be accessed later by image upload
@@ -36,4 +37,4 @@ $(document).ready(function() {
         return false;
     });
 
-});
+});
diff --git a/grails-app/assets/stylesheets/grails-page.less b/grails-app/assets/stylesheets/grails-page.less
@@ -497,18 +497,6 @@ a.like {
     font-size: 12px;
     color: rgba(102, 102, 102, 0.79);
 }
-.wiki-form {
-    .CodeMirror {
-        border: 1px solid #eee;
-        width: 663px;
-    }
-    .CodeMirror-scroll {
-        height: auto;
-        overflow-y: hidden;
-        overflow-x: auto;
-        width: 100%;
-    }
-}
 
 form.search {
     padding: 5px;
@@ -626,3 +614,15 @@ form.search {
         }
     }
 }
+
+#main {
+	.CodeMirror {
+			border: 1px solid #eee;
+			width: auto;
+			height: auto;
+	}
+
+	.CodeMirror-scroll {
+		max-height: 1000px;
+	}
+}
diff --git a/grails-app/assets/stylesheets/grails-wiki.less b/grails-app/assets/stylesheets/grails-wiki.less
@@ -2,16 +2,16 @@ code {
 	color: @grailsGray;
 }
 .wiki {
-	
+
 	h2, h3 {
 	}
-	
+
 	h3 {
 		color: @grailsGreen;
 		font-size: @baseFontSize + 1;
 		text-transform: uppercase;
 	}
-	
+
 }
 
 .wiki-plugin {
@@ -87,7 +87,6 @@ code {
 #main .wiki-form .CodeMirror{
     background-color: @inputBackground;
     border: 1px solid @inputBorder;
-    width: 97%;
     line-height: 18px;
     margin-bottom: 18px;
     &.CodeMirror-focused {
@@ -102,4 +101,13 @@ code {
 label.label {
     font-size: 16px;
     color: @grailsGreen;
-}
+}
+
+.wiki-form label {
+	font-size: 1.7em;
+	border-bottom: 2px solid #F6F6F6;
+	line-height: 30px;
+	padding: 5px 0;
+	margin: 10px 0;
+	display: block;
+}
diff --git a/grails-app/views/content/_wikiCodeMirrorJavaScript.gsp b/grails-app/views/content/_wikiCodeMirrorJavaScript.gsp
@@ -6,7 +6,8 @@
             lineWrapping: true,
             gutter: true,
             fixedGutter: true,
-            autofocus: true
+            autofocus: true,
+            scrollbarStyle: "overlay"
         });
         $('.preview').click(function() {
             $.ajax({
@@ -31,4 +32,4 @@
             return false;
         });
     });
-</asset:script>
+</asset:script>
diff --git a/grails-app/views/content/_wikiForm.gsp b/grails-app/views/content/_wikiForm.gsp
@@ -5,12 +5,9 @@
     <g:hiddenField name="title" value="${wikiPage?.title}"/>
     <input type="hidden" name="version" value="${wikiPage?.version}"/>
     <fieldset>
-
         <div class="control-group ${hasErrors(bean: wikiPage, field: 'body', 'error')}">
-            <div class="col-sm-10">
-                <g:textArea class="form-control wiki input-fullsize" cols="30" rows="20" id="wikiPageBody" name="body"
-                            value="${wikiPage?.body}" />
-            </div>
+          <g:textArea class="form-control wiki input-fullsize" cols="30" rows="20" id="wikiPageBody" name="body"
+                      value="${wikiPage?.body}" />
         </div>
 
         <div class="form-group"><div class="col-sm-offset-2 col-sm-10">
@@ -23,5 +20,3 @@
     </fieldset>
 
 </g:form>
-
-
diff --git a/grails-app/views/plugin/editPlugin.gsp b/grails-app/views/plugin/editPlugin.gsp
@@ -9,22 +9,6 @@
     <asset:stylesheet src="plugin-edit"/>
     <asset:javascript src="plugin-edit"/>
     <g:render template="tagSetup" model="[allTags:allTags]" />
-    <style type="text/css">
-        .wiki-form  .CodeMirror {
-            border: 1px solid #eee;
-            width: auto;
-            height: auto;
-            max-height: 50em;
-        }
-        .wiki-form label {
-          font-size: 1.7em;
-          border-bottom: 2px solid #F6F6F6;
-          line-height: 30px;
-          padding: 5px 0;
-          margin: 10px 0;
-          display: block;
-        }
-    </style>
 </head>
 
 <body>
@@ -149,7 +133,8 @@
                                 lineWrapping: true,
                                 gutter: true,
                                 fixedGutter: true,
-                                scrollbarStyle: "overlay"
+                                scrollbarStyle: "overlay",
+                                viewportMargin: Infinity
                             });
                         })
 

diff --git a/grails-app/views/videoHostAdmin/_form.gsp b/grails-app/views/videoHostAdmin/_form.gsp
@@ -39,7 +39,8 @@ $(function() {
             "'/'": function(cm) { cm.closeTag(cm, '/'); }
         },
         lineNumbers: true,
-        wordWrap: true
+        wordWrap: true,
+        scrollbarStyle: "overlay"
     });
 })
 </asset:script>