1行高的CodeMirror实例

Question

I'm writing a program that will use a CodeMirror instance and have a little element that pops up that you can, among other things, type text in. That text typing area is supposed to be one line high. I'm going to be doing a lot of the same stuff with that text typing area that I'm doing with the main CodeMirror instance, so I want to just use another instance of CodeMirror, but everything I've tried so far ends up too tall.

How do I make a CodeMirror instance that is just one line high and is horizontally scrollable? I'd like no line numbers, no gutters, etc., just the area for the text to be entered.

I tried several things including the code here (which I tried in whole and in parts): codemirror for just one-line-textfield? . The example prevents a user from typing more than one line of code in a code mirror instance, but it doesn't make it just one line high. There's other CodeMirror stuff there, though I'm not sure what all is there or how to get rid of it.

Edit: re: @rfornal's request, here was the code and explanation I'm referring to (by Tigran Saluev):

Well, there is a way to make a single-line editor using rich capabilities of CodeMirror. First, you'll have to add a full-featured CodeMirror object (use a textarea).

Assume you've got var cm = CodeMirror(...). (Use value: ""). Then do

 cm.setSize(200, cm.defaultTextHeight() + 2 * 4); // 200 is the preferable width of text field in pixels, // 4 is default CM padding (which depends on the theme you're using) // now disallow adding newlines in the following simple way cm.on("beforeChange", function(instance, change) { var newtext = change.text.join("").replace(/\\n/g, ""); // remove ALL \\n ! change.update(change.from, change.to, [newtext]); return true; }); // and then hide ugly horizontal scrollbar cm.on("change", function(instance, change) { $(".CodeMirror-hscrollbar").css('display', 'none'); // (!) this code is using jQuery and the selector is quite imperfect if // you're using more than one CodeMirror on your page. you're free to // change it appealing to your page structure. }); // the following line fixes a bug I've encountered in CodeMirror 3.1 $(".CodeMirror-scroll").css('overflow', 'hidden'); // jQuery again! be careful with selector or move this to .css file 

This works just fine for me.

Everything I've tried so far still ends up taller than one line. There's probably a way to do this, I'm just not understanding how.

Answer 1

As per usual, this was user error. I had assumed that CodeMirror's styles would overwrite any styles that I had created for the container, but they didn't. My styles infected the CodeMirror instance and caused the weirdness.

Specifically:
- Setting position: relative somewhere where it shouldn't be (I'm not sure where)
- Setting display: inline-block somewhere where it shouldn't be (again, not sure what it specifically affected)

My apologies and I hope this helps someone else in the future.