Forcing vertical scrollbar visible and others....

1

Hi there,

I am trying to use CodeMirror with a particular application:

cm1
cm1487×765 24.6 KB

Where at column 14, should add a new line.
No whitespaces allowed.

I was trying to deal with .Codemirror, adjusting the width ‘on change’ to force a new line, example:

if (‘14’) $(’.CodeMirror’).css(‘width’, ‘164px’);
if (‘16’) $(’.CodeMirror’).css(‘width’, ‘184px’);

This because I cannot force vertical scrollbar even when not necessary, as I need to limit the number of characters per line.

Updating the .Codemirror to overflow-y: scroll or even trying to see some results in -scroll, no sucess.

My setup:

tela2
tela21994×533 28.6 KB

Codemirror.css I went back to the default settings.

But even on “fit width”, when I load the page, then click to show the parent div of my textarea, load good:

tela3
tela3454×737 24.4 KB

if I hide and show again the parent div:

hide
hide507×745 30.9 KB

tela1
tela12141×935 66.1 KB

Resuming:

  • How can I force vertical scroll?
  • Is there a better way to force new line at column position?
  • Show and Hide parent’s div of my textarea can ‘break’ the value?
  • Is there a way to allow only the input of these characters: “10HLXGVC” plus Enter and Backspace?

I am very grateful for your help and patience.

Happy New Year.

Cheers,

Rafael

2

That isn’t supported at the moment. The editor manages its own scrollbar visibility, and doesn’t have a way to configure always-visible scrollbars.

Line-breaking is done by the browser, so the editor doesn’t have full control over it (and even with a monospace font, some characters that aren’t present in the font will still have a non-uniform width).

Call refresh() on the editor after it becomes visible to give it a change to lay itself out.

Look into the "beforeChange" event—that allows you to inspect and block changes before they happen.