Databases
StackOverflow2013
Postsdbo
POCodeMirror (JS Code Highlight) text in textarea exceeds textarea width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCodeMirror (JS Code Highlight) text in textarea exceeds textarea width
    text
    copied!<p>I've been working with CodeMirror today to create a little environment where I can edit some PHP code that is stored in a database (yes, I know this could be harmfull, but the PHP code is not accesable for normal users).</p> <p>Everythings works great, the editor works, code highlighting works, indent tabs work, but there's one thing that's bothering me for a while now and I can't seem to find a solutions to this. The code that is within my CodeMirror editor textarea, which is longer than the textarea exceeds the textarea and will disappear somewhere out of my screen (see the screenshot at the end of this post).</p> <p>I would like to have this code to continue on a line below (without adding an extra linenumber ofcourse). Is this a known issue and/or easy to fix?</p> <p>Here's a screenshot: <a href="http://www.pendemo.nl/codemirror.png" rel="noreferrer">http://www.pendemo.nl/codemirror.png</a></p> <p>Thanks in advance.</p> <p>//Edit: it's fixed</p> <p>Ok, got it figured out, seemed to be all in the CSS file! Here's the fix for anyone that's interested:</p> <pre><code>.CodeMirror { overflow-y: auto; overflow-x: scroll; width: 700px; height: auto; line-height: 1em; font-family: monospace; _position: relative; /* IE6 hack */ } </code></pre> <p>overflow-y: auto (height is being done auto, so no need for a vertical scrollbar). overflow-x: scroll; to force CodeMirror to add a scrollbar instead of exceeding the width of the textarea. And they give a fixed width (px or percentage). You can also add a max-height, but if you do you perhaps have to set overflow-y to scroll aswel.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload