Make WordPress Core

Opened 11 years ago

Closed 10 years ago

#26053 closed enhancement (fixed)

Auto-expand quick draft textarea

Reported by: lessbloat's profile lessbloat Owned by: helen's profile helen
Milestone: 3.8 Priority: high
Severity: minor Version:
Component: Administration Keywords: has-patch needs-testing
Focuses: Cc:


Within the quick draft description field, we should auto-expand the height of the textarea once content get's past the default 3 lines. Same for when you paste some text in.

Attachments (10)

26053.diff (1.9 KB) - added by lessbloat 11 years ago.
26053.1.diff (2.0 KB) - added by seanchayes 11 years ago.
26053-quick-draft-01.png (7.3 KB) - added by seanchayes 11 years ago.
26053-quick-draft-02.png (5.3 KB) - added by seanchayes 11 years ago.
26053.2.diff (2.7 KB) - added by lessbloat 10 years ago.
26053.3.diff (3.1 KB) - added by helen 10 years ago.
26053.4.diff (3.2 KB) - added by helen 10 years ago.
26053.5.diff (3.4 KB) - added by markjaquith 10 years ago.
26053.6.diff (3.5 KB) - added by markjaquith 10 years ago.
26053.7.diff (3.5 KB) - added by helen 10 years ago.

Download all attachments as: .zip

Change History (20)

11 years ago

#1 @lessbloat
11 years ago

26053.diff​ is a first stab at this. Tested in MAC Chrome, FF, and WIN Chrome, FF, IE8.

#2 @lessbloat
11 years ago

  • Keywords has-patch needs-testing added

11 years ago

#3 @seanchayes
11 years ago


Minor changes suggested in modified patch 26053.1

  1. Removed a spurious comma.
  2. Set a minimum height on the content area (see image before the minimum height was set). Typing the title then pressing "Tab" placed the insertion point in #content but the height was adjusted to make it a little too small for typing. If you start typing the height auto-adjusts but it does look a little odd.

Before setting height:

After setting height:

#4 @matt
11 years ago

  • Priority changed from normal to high
  • Severity changed from normal to minor

#5 @helen
10 years ago

Should probably define a sane max height (apologies if I missed it in skimming the patch). Looks like there's also some trailing whitespace and spaces instead of tabs in the patch that could use some fixing up.

10 years ago

#6 @lessbloat
10 years ago


  • Refresh of 26053.1.diff
  • Removed min-heigh from being set in JS, and placed it in CSS
  • Adds max-height to CSS
  • Adds height check to make sure editor never exceeds height of window-100px (100px allows the save draft button to still be seen).
  • Adds scrollbar in when max height is met.

Tested on MAC Chrome, FF, Safari & WIN Chrome, FF, IE8

10 years ago

#7 @helen
10 years ago

26053.3.diff simplifies the JS a bit, avoids triggering any height changes where possible, and adds a very quick animation to the grow/shrink effect. Also lints clean.

I played with scrollHeight a bit, the way DFW handles it, but it was calculating the height to be about half a line too short. Might have been me not accounting for something - if we can do it that way, and are fine with IE8+ support only, it might be better than doing the div clone thing.

One other thing - it doesn't recalculate a max height at any point after initial load. It did not bother me to have the textarea be short after resizing taller, and it felt really wrong to have it shrink when typing after resizing shorter.

10 years ago

10 years ago

10 years ago

#8 @markjaquith
10 years ago

26053.6.diff changes the following from @helen's .4 version:

  • Sets some additional CSS properties on the clone element to deal with long lines of text without spaces.
  • Messes with overflow-y on the editor element to make sure scrollbars never show when we're doing dynamic resizing.
  • Cleans up .css() indenting.
  • Gets rid of the animation. The animation causes multiline pastes to make the content jump.
  • Gets rid of the buffer line at the bottom. Not needed. We can instantly resize, even on multiline pastes.
  • Kills the resize handle that some browsers add, since we are handling it ourselves.
  • Runs the clone as display: none (Potentially faster? Saw someone advocate this. Didn't seem to hurt).

10 years ago

#9 @helen
10 years ago

Tried to do this just using scrollHeight, but scrollHeight doesn't get smaller when you remove text, and workarounds to reset it meant resizing it multiple times. The only thing I have is to make that overflow-y auto instead, and if we turn off this field with no-JS (see #26376), then we should do the resize: none in CSS.

#10 @helen
10 years ago

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

In 26564:

Auto-resize the Quick Draft textarea. props lessbloat, markjaquith, helen. fixes #26053.

Note: See TracTickets for help on using tickets.