YUILibrary - Open source JavaScript and CSS for building richly interactive software.
Fork YUI on GitHub

YUI 2.x

Ticket #2528825 (closed defect)

Reporter


Wesley Mostien 		Opened: 03/5/10
Last modified: 03/6/10
Status: closed
Type: defect
Resolution: invalid

Owner


Dav Glass 		Target Release:
Priority: P3 (normal)
Summary: Editor - Resize handles issues
Description:

In Firefox :

When an image is selected, you get the 6 resize handles to resize the current selected image. Now double click the image, you get the 'image properties window'. Change the textflow or alignment of the
image, you will see that the image is aligned correctly but the handles are still in the same place....so they don't move along with the selected image.

I have no idea how to solve this or even where to look. Are these handles created through css, JS, ...? I don't see it.

In IE :

The above works there as it supposed to. But.... the resize handles are rendered/shown on top the 'image properties window'. Not really beautiful.
Type: defect Observed in Version: 2.8.0
Component: Editor Severity: S3 (normal)
Assigned To: Dav Glass Target Release:
Location: Priority: P3 (normal)
Tags: editor, resize handles Relates To:
Browsers: Firefox 2.x - All,Firefox 3.x - All,IE - All
URL:
Test Information:

Change History

Wesley Mostien
Posted: 03/5/10

I mean '8 handles' instead of 6...thanks

Dav Glass

YUI Developer
Posted: 03/6/10
  • priority changed to P3 (normal)
  • resolution changed to invalid
  • status changed from new to closed

Editor doesn't handle this interaction, it's built into the browser. Firefox has had this issue for several releases and there is no fix for it as of yet.

Wesley Mostien
Posted: 03/6/10
  • status changed from closed to reopened

Wesley Mostien
Posted: 03/6/10
  • resolution changed from invalid

OK, but what makes the resize handles appear around the image when you click it ? Which css styling or is it javascript ?

Has it do with the 'contentEditable' attribute ?

Thanks for helping

Wesley Mostien
Posted: 03/6/10

I have this & seems to work for Firefox, IE6-8 :

(newEditor = editor)

YAHOO.widget.Editor.prototype.moveWindow = function(){
var sel = newEditor._getSelectedElement();

//if current selected element is an image
if (newEditor._isElement(sel, 'img')) {

//hide resize handles (in this ORDER!)
if(newEditor.browser.gecko > 0)
newEditor._getDoc().designMode = 'off'; //Firefox
newEditor._getDoc().body.contentEditable = false;
newEditor._getDoc().body.contentEditable = true;
if(newEditor.browser.gecko > 0)
newEditor._getDoc().designMode = 'on'; //Firefox
}

}

So when double clicking on an image, the resize handles disappear, but the image is still 'selected'...

You know a way to put the resize handles back on the image? (focus, trigger, ... ?)

Dav Glass

YUI Developer
Posted: 03/6/10
  • resolution changed to invalid
  • status changed from reopened to closed

It happens when designMode is set on the iframe to edit. This is still not a valid bug, it's a quirk in the browser. Since IE and FF are the only A-Grade that supports this "extra" interaction Editor will not do anything to normalize it.