#42554 closed defect (bug) (fixed)
CodeMirror extends content width when initialized in IE11
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | 4.9 | Priority: | normal |
| Severity: | normal | Version: | 4.9 |
| Component: | General | Keywords: | has-patch commit dev-reviewed |
| Focuses: | ui | Cc: |
Description
When viewing the plugin/theme editors in IE11 the code edit area is pushed below the files list.
This only happens once the CodeMirror instance is initialized, as it seems to go outside the 100% width already assigned.
It all seems to rely on the #template textarea, #template .CodeMirror width, reducing this by even .1% positions the editor appropriately again.
Attachments (2)
Change History (15)
#2
@
7 years ago
Seems to me the reason why the CodeMirror wrap gets a bit bigger in Chrome and breaks the layout in IE is normal textarea element in WordPress use box-sizing: border-box; while the CodeMirror wrapper doesn't.
Adding box-sizing: border-box; to #template .CodeMirror fixes it for me.
#3
@
7 years ago
42554.diff adds box-sizing: border-box; and fixes some spacing issues (which my editor automatically does).
This ticket was mentioned in Slack in #core by afercia. View the logs.
7 years ago
#5
@
7 years ago
- Keywords has-patch commit dev-reviewed added; needs-patch removed
42554.diff works as expected.
This ticket was mentioned in Slack in #core-committers by afercia. View the logs.
7 years ago
#10
@
7 years ago
Tweaked the height of the file list so it's back to being even with the editor box. Can someone re-check in IE11?
Seems also in Chrome the CodeMirror area overlaps a few pixels the right column. See below, the blue border should look a bit thicker. It is very evident when refreshing the page, before CodeMirror instantiate the border will be fully visible, and partially hidden after CM is instantiated.