WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#42554 closed defect (bug) (fixed)

CodeMirror extends content width when initialized in IE11

Reported by: Clorith Owned by: westonruter
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)

42554.diff (1.4 KB) - added by afercia 4 years ago.
42554.2.diff (1.7 KB) - added by melchoyce 4 years ago.

Download all attachments as: .zip

Change History (15)

#1 @afercia
4 years ago

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.

https://cldup.com/ETlV-SVn3O.png

#2 @afercia
4 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.

@afercia
4 years ago

#3 @afercia
4 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.


4 years ago

#5 @SergeyBiryukov
4 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.


4 years ago

#7 @westonruter
4 years ago

@Clorith is this not a duplicate of #42551? (Or now vice versa)

#8 @Clorith
4 years ago

Looks like you are right @westonruter (I completely missed that one)

#9 @westonruter
4 years ago

#42551 was marked as a duplicate.

@melchoyce
4 years ago

#10 @melchoyce
4 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?

#11 @Clorith
4 years ago

Alignment looks good

#12 @westonruter
4 years ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

In 42189:

File Editor: Eliminate gap inserted between code editor and heading in IE11 when CodeMirror initializes.

Props afercia, melchoyce, Clorith for testing, SergeyBiryukov for testing.
See #12423.
Fixes #42554 for trunk.

#13 @westonruter
4 years ago

In 42190:

File Editor: Eliminate gap inserted between code editor and heading in IE11 when CodeMirror initializes.

Props afercia, melchoyce, Clorith for testing, SergeyBiryukov for testing.
See #12423.
Fixes #42554 for 4.9.

Note: See TracTickets for help on using tickets.