javascript - CodeMirror doesn't scroll down completely, Cursor is hidden behind div -


i use excellent texteditor codemirror in fullscreen mode in browser window , add fixed header kind of menu - or @ least space few buttons functionality.

so i've added div "position: fixed" top , added padding-top div codemirror object. problem comes up, when there's enough text scrolling happens. after moving cursor down/scrolling content , moving cursor again, cursor goes behind div content doesn't scroll down. cursor hidden, cannot see content. scrolling via scrollbar works.

do need change html/css fixed div? or need check whether cursor comes behind/under div , have let codemirror scroll manually? tried didn't manage programmatically :-(

<!doctype html> <html> <head>     <meta charset="utf-8">     <link rel=stylesheet href="http://codemirror.net/doc/docs.css">     <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">     <script src=http://codemirror.net/lib/codemirror.js></script>     <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>     <style type=text/css>         .codemirror {float: left; width: 100%; height: 100%; }     </style>   </head> <body>   <div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">     <button>some action</button>   </div>   <div style="padding-top: 23px">     <textarea id=content name="content"></textarea>   </div>     <script>       var editor = codemirror.fromtextarea(document.getelementbyid('content'), {         mode: 'application/x-httpd-php',         linenumbers: true       });     </script>   </body> </html>

check out here well: http://jsfiddle.net/fxvef3bw/1/

i found solution on own.

instead of 2 overlapping divs, use 2 divs (non-overlapping), style "position: absolute". don't overlap, scrolling fine.

<!doctype html> <html> <head>     <meta charset="utf-8">     <link rel=stylesheet href="http://codemirror.net/doc/docs.css">     <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">     <script src=http://codemirror.net/lib/codemirror.js></script>     <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>     <style type=text/css>         .codemirror {float: left; width: 100%; height: 100%; }     </style>   </head> <body>     <div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">         <button>some action</button>     </div>     <div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">         <textarea id="content" name="content" style="display: none;"></textarea>     </div>     <script>       var editor = codemirror.fromtextarea(document.getelementbyid('content'), {         mode: 'application/x-httpd-php',         linenumbers: true       });     </script>   </body> </html>

updated jsfiddle here: http://jsfiddle.net/fxvef3bw/2/

i hope can comments possible side effects or drawbacks of position absolute. otherwise seems fine me.


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more