Vertical scrolling broken in Safari & Firefox when using Flexbox. #4895

New issue

Closed

opened 2017-08-06 03:47:55 +02:00 by marijnh · 3 comments

marijnh commented

2017-08-06 03:47:55 +02:00

(Migrated from gitlab.com)

If a CodeMirror (5.28) instance is contained in an element with display:flex, vertical scrolling breaks on Safari & Firefox. The symptom is different for each browser:

Firefox 54: Scrolling is disabled, and the CM instance sizes to fit its content.
Safari 10.1.1: The outer .CodeMirror element & scrollbar resizes correctly, but the inner .CodeMirror_scroll element displays at a fixed pixel size with a horizontal scroll bar.
Chrome 59: appears to work fine.

Example of the issue:
https://jsfiddle.net/m37txcka/1/

Setting .CodeMirror_scroll to position:absolute seems to resolve this issue, but it causes the vertical scrollbar to always show, and I'm worried that it's going to introduce other problems.

Example of the "fix":
https://jsfiddle.net/m37txcka

Happy to modify the enclosing HTML to work around this if there's a known solution, but I need the Flexbox layout functionality.

Thanks!

If a CodeMirror (5.28) instance is contained in an element with `display:flex`, vertical scrolling breaks on Safari & Firefox. The symptom is different for each browser: **Firefox 54**: Scrolling is disabled, and the CM instance sizes to fit its content. **Safari 10.1.1**: The outer `.CodeMirror` element & scrollbar resizes correctly, but the inner `.CodeMirror_scroll` element displays at a fixed pixel size with a horizontal scroll bar. **Chrome 59**: appears to work fine. Example of the issue: https://jsfiddle.net/m37txcka/1/ Setting `.CodeMirror_scroll` to `position:absolute` seems to resolve this issue, but it causes the vertical scrollbar to always show, and I'm worried that it's going to introduce other problems. Example of the "fix": https://jsfiddle.net/m37txcka Happy to modify the enclosing HTML to work around this if there's a known solution, but I need the Flexbox layout functionality. Thanks!

marijnh commented

2017-08-06 07:42:32 +02:00

(Migrated from gitlab.com)

I think this is a duplicate of #4142 , though it's interesting to see that it also occurs for vertical flex layout. A solution is to introduce an additional wrapping <div> around the editor, so that it's direct parent isn't display: flex. Firefox and Safari appear to have a bug where they'll ignore the static height of the .CodeMirror div in this situation. (At least, the way I understand the spec, that's not the correct behavior.)

I think this is a duplicate of #4142 , though it's interesting to see that it also occurs for vertical flex layout. A solution is to introduce an additional wrapping `<div>` around the editor, so that it's direct parent isn't `display: flex`. Firefox and Safari appear to have a bug where they'll ignore the static `height` of the `.CodeMirror` div in this situation. (At least, the way I understand the spec, that's not the correct behavior.)

marijnh (Migrated from gitlab.com) closed this issue

2017-08-06 07:42:32 +02:00

marijnh commented

2017-08-06 07:43:26 +02:00

(Migrated from gitlab.com)

mentioned in issue #4142

marijnh commented

2017-08-06 19:46:47 +02:00

(Migrated from gitlab.com)

After some fussing around, I was able to find a solution that appears to size correctly and maintains autohide on the scrollbars. As Marijn suggested, this involved wrapping the CodeMirror element in a parent div. The parent div (which is sized via its flexbox parent) needs to have position:relative set, and the CodeMirror element needs to have position:absolute set. You can then set CodeMirror to 100% / 100% and it will fill the available space.

Here's a working example for anyone encountering the same issue:
https://jsfiddle.net/m37txcka/4/

Thanks for the help Marijn!

After some fussing around, I was able to find a solution that appears to size correctly and maintains autohide on the scrollbars. As Marijn suggested, this involved wrapping the CodeMirror element in a parent div. The parent div (which is sized via its flexbox parent) needs to have `position:relative` set, and the CodeMirror element needs to have `position:absolute` set. You can then set CodeMirror to 100% / 100% and it will fill the available space. Here's a working example for anyone encountering the same issue: https://jsfiddle.net/m37txcka/4/ Thanks for the help Marijn!

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

codemirror/codemirror5#4895

No description provided.

Rows
Columns