max-width:100% issue #6241

New issue

Open

opened 2020-04-23 14:15:57 +02:00 by marijnh · 2 comments

marijnh commented

2020-04-23 14:15:57 +02:00

(Migrated from gitlab.com)

As in this issue I expand the issue to a more general issue, that's when the container of the <form> has a width:100% the code editor simply applies whatever width it needs, in pixels, to render the full width of the editor and doing so no horizontal scrolling is present, so it means that the editor overflows and breaks any structural design where the width of the container is actually dynamic instead of static.

Modern CSS frameworks do use dynamic sizes to adapt the contents to different screen sizes without having ever to apply static pixel sizes but this concept seems missing from CodeMirror.

My workaround is to simply add overflow-x: auto on the container of the <form> which kind of fixes it in a way and breaks it in another, like there's no more an appropriate scrollbar(on my notebook I can scroll horizontally with the touchpad gesture or going with the carrier bar to the right) and some text at the extreme end is cut out(like few characters, all in the ASCII range).

If asked I will try to post an example of my case and the workaround.
Later on I'm going to try also some extra fixes to better work around this silly issue.

As in this [issue](https://github.com/codemirror/CodeMirror/issues/4142) I expand the issue to a more general issue, that's when the container of the `<form>` has a `width:100%` the code editor simply applies whatever `width` it needs, in pixels, to render the full width of the editor and doing so no horizontal scrolling is present, so it means that the editor overflows and breaks any structural design where the `width` of the container is actually dynamic instead of static. Modern CSS frameworks do use dynamic sizes to adapt the contents to different screen sizes without having ever to apply static pixel sizes but this concept seems missing from CodeMirror. My workaround is to simply add `overflow-x: auto` on the container of the `<form>` which kind of fixes it in a way and breaks it in another, like there's no more an appropriate scrollbar(on my notebook I can scroll horizontally with the touchpad gesture or going with the carrier bar to the right) and some text at the extreme end is cut out(like few characters, all in the ASCII range). If asked I will try to post an example of my case and the workaround. Later on I'm going to try also some extra fixes to better work around this silly issue.

marijnh commented

2020-04-23 22:18:22 +02:00

(Migrated from gitlab.com)

Modern CSS frameworks do use dynamic sizes to adapt the contents to different screen sizes without having ever to apply static pixel sizes but this concept seems missing from CodeMirror.

I frankly have no idea what this is supposed to mean.

Setting the parent node to width: 100% appears to have no adverse effects at all. So yes, please provide a minimal example. If the parent or grandparent is display: flex, you'll probably have to add an additional wrapper element around the editor to make it size properly.

> Modern CSS frameworks do use dynamic sizes to adapt the contents to different screen sizes without having ever to apply static pixel sizes but this concept seems missing from CodeMirror. I frankly have no idea what this is supposed to mean. Setting the parent node to `width: 100%` appears to have no adverse effects at all. So yes, please provide a minimal example. If the parent or grandparent is `display: flex`, you'll probably have to add an additional wrapper element around the editor to make it size properly.

marijnh commented

2024-01-15 20:08:09 +01:00

(Migrated from gitlab.com)

@thepra I'm not 100% sure what you mean either but I'm guessing you need min-width: 0 on the CodeMirror element or something containing it, at least if it's inside a display: flex element.

This is non-intuitive and confuses me almost every time I run into it, but it's because the default is unfortunately min-width: auto for a row flex item: https://stackoverflow.com/a/36247448/200224

`@thepra` I'm not 100% sure what you mean either but I'm guessing you need `min-width: 0` on the CodeMirror element or something containing it, at least if it's inside a `display: flex` element. This is non-intuitive and confuses me almost every time I run into it, but it's because the default is unfortunately `min-width: auto` for a row flex item: https://stackoverflow.com/a/36247448/200224

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#6241

No description provided.

Rows
Columns