Some Webkit-based browsers (at least Chrome 4) show small arrow in bottom right corner of textareas. This duplicates functionality already provided by Drupal core (grippie + resizable.js). I would suggest to either disable it completely:

textarea {
  resize: none;
}

or at least prevent horizontal resizing as it does not play nicely with grippie and sidebars

textarea {
  resize: vertical;
}
CommentFileSizeAuthor
#2 bartik.png124.63 KBjarek foksa

Comments

Jeff Burnz’s picture

Jeff Burnz commented

How would disabling horizontal resize affect CK Editor, one of the coolest things is that you can drag it horizontally and make it as big as you want.

Maybe we need to rethink how the grippie is themed, to allow it work with horizontal resizing - basically fix the problem rather than using a workaround that could have detrimental or unwanted effect for many other browsers/modules.

What exactly happens with the sidebars? Do they get pushed down?

jarek foksa’s picture

jarek foksa commented
StatusFileSize
new bartik.png124.63 KB

I don't think that any third-party module makes use of this property as it is very fresh and most browsers don't support it.

Attached screenshot should be self-explanatory.

Jeff Burnz’s picture

Jeff Burnz commented

So basically a background color on text-area would pretty much fix it?

jarek foksa’s picture

jarek foksa commented

Yes, but I really don't see the point in horizontal resizing if textareas are already set to take 95% of available horizontal space.

jensimmons’s picture

jensimmons commented
Status: Active » Closed (won't fix)

Hmmm, seems like there's not much action happening on this issue. And that it's too minor of a priority for it to warrant moving to Drupal project. (Trying to keep the list there as short and doable as possible!) So I'm going to won't fix this.

xcono’s picture

xcono commented
Issue summary: View changes

It was 5 years ago, but for people who comes from search.
You can always use custom js, something like this:

$('textarea').mouseup(function(){
    var parentWidth = $(this).parent().outerWidth();
    ($(this).width() > parentWidth) && $(this).css('width', parentWidth);
});