On a specific page, I am using a 2-column CSS layout, with multiple CodeMirror editors throughout the page. The editor always works in the left column and never works in the right column.
Here is an example:
https://www.daniweb.com/dev/codemirror
I’m getting a Javascript “Uncaught TypeError” error. Latest unmodified version of CM.
Update: You’ll also notice that the cursor doesn’t stay on the correct line, and the text is out of the scrollable area, when trying to type multiple lines in the left column.
Everything works perfectly fine (same CSS, same everything) when the editor is itself not contained within a column.
I can reproduce this, but I don’t get the script error. I just get a second editor whose DOM looks fine (the content is there, dev tools even shows a blue rectangle in the right place when I hover over it), but whose content does not show up visibly, and indeed runs over the right edge.
The invisibility seems like a browser bug, I am not sure about the right border thing. Almost every time I’ve tried to use CSS columns, I ended up going with a different solution because browsers are inconsistent and buggy about this feature. Seeing how it is still prefixed and largely unimplemented, I think this isn’t something that’s going to be solid any time soon, and I’d recommend going with another layout solution if at all possible.
Hi,
Sorry, the JS bug was a remnant from not refreshing my browser cache, causing an inconsistency.
I’m using it on the page that displays all posts by a specific member. You can see here:
https://www.daniweb.com/members/1/dani/posts
As a moderator, I have a little Edit button that toggles the post into a CodeMirror editor to make changes to the post, if need be. It’s not the absolute end of the world, because I can actually just resize my browser window to not be wide enough to accommodate 2 columns, and it all works fine. However, for the sake of all of our other moderators, I will most likely have this page load the Edit screen up in a modal window instead of toggling in place.
Either way, as a front-end JS/CSS expert, do you recommend against using CSS columns to have the two column layout as I have it for this one page? Or do you think it will end up degrading nicely? (CM not considered)
I’m by no means an expert on CSS, I just have had all kinds of bad experiences with trying to columnize anything that’s not very simple text.