Opened 9 years ago

Closed 8 years ago

#11736 closed defect (wontfix)

dijit.Editor IE8: Scrollbars appear when selecting an image

Reported by: philip Owned by:
Priority: high Milestone: future
Component: Editor Version: 1.5
Keywords: dijit.Editor scrollbar IE8 Cc:
Blocked By: Blocking:

Description

If you insert an image into a dijit.Editor, and select it, you will see a vertical scrollbar in IE8. This scrollbar disappears when the image is de-selected. This works fine in Firefox.

To reproduce, run the sample code and click the Insert Image button. When you select the image, scrollbars will appear. You can also do this manually using the insertImage plugin (see LinkDialog?).

<html dir="ltr">
<head>

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"/>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
  </script>
  <script type="text/javascript">
    dojo.require("dijit.Editor");
  </script>

<body class="tundra">

<script>
  // Insert an image
  function insert(elem) {
    var editor = dijit.byId(elem);
    var html = "<img src='http://www.google.com/images/logos/ps_logo2.png'>";
    editor.execCommand('inserthtml', html);
  }
</script>

<button onclick="insert('editor1');">Insert Image</button>

<br/>
<div dojoType="dijit.Editor" id="editor1">
  <p>Initial Text</p>
</div>

</body>
</html>

Attachments (2)

ie8_image_selected.png (45.0 KB) - added by philip 9 years ago.
A selected image in IE8 causes a scrollbar to be shown
ie8_image_selected_justify.png (39.1 KB) - added by philip 9 years ago.
Adding an image after the text, right-justify the contents, and select the image.

Download all attachments as: .zip

Change History (8)

Changed 9 years ago by philip

Attachment: ie8_image_selected.png added

A selected image in IE8 causes a scrollbar to be shown

comment:1 Changed 9 years ago by philip

This is a better example. I tracked down the problem. You MUST have your text between a <p> and </p> tags in IE8 in order for the image to not produce a scrollbar when selected.

  1. Run this example in IE8. Insert an image and select it. A scrollbar will appear
  2. Edit this example and put a <p> and </p> around the initial edit text. When you insert and image and select it, a scrollbar will not appear.

This works fine in Firefox without the <p> and </p> tags.

If you decide this is the correct behavior, then any method that allows the text to be set needs to add <p> and </p> to the text.

<html dir="ltr">
<head>

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"/>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
  </script>
  <script type="text/javascript">
    dojo.require("dijit.Editor");
    dojo.require("dijit._editor.plugins.LinkDialog");
  </script>

<body class="tundra">

<script>
  // Insert an image
  function insert(elem) {
    var editor = dijit.byId(elem);
    var html = "<img src='http://www.google.com/images/logos/ps_logo2.png'>";
    editor.execCommand('inserthtml', html);
  }
</script>

<button onclick="insert('editor1');">Insert Image</button>

<br/>
<div dojoType="dijit.Editor" id="editor1" plugins="['insertImage']">
  Initial Text
</div>

</body>
</html>

comment:2 Changed 9 years ago by bill

Component: GeneralEditor
Owner: anonymous deleted

comment:3 Changed 9 years ago by philip

This is a better example of the problem. The problem gets worse when you right-align the text and the image is inserted after any text.

To see the problem in IE7/IE8:

  1. Click in the editor after the end of the text to move the cursor.
  1. Click the 'Insert Image' button.
  1. Click on the right-justify toolbar icon
  1. Select the image. You will see both vertical and horizontal scrollbars. See attached file.
<html dir="ltr">
<head>

  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"/>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
  </script>
  <script type="text/javascript">
    dojo.require("dijit.Editor");
    dojo.require("dijit._editor.plugins.LinkDialog");
  </script>

<body class="tundra">

<script>
  // Insert an image
  function insert(elem) {
    var editor = dijit.byId(elem);
    var html = "<img src='http://www.google.com/images/logos/ps_logo2.png'>";
    editor.execCommand('inserthtml', html);
  }
</script>

<button onclick="insert('editor1');">Insert Image</button>

<br/>
<div dojoType="dijit.Editor" id="editor1" plugins="['justifyRight','|', 'insertImage']">
<p>Initial Text</p>
</div>

</body>
</html>

Changed 9 years ago by philip

Adding an image after the text, right-justify the contents, and select the image.

comment:4 Changed 9 years ago by philip

I noticed that my last example also shows an issue in Firefox (3.6.9). In Firefox, a horizontal scrollbar is shown when you follow the steps.

comment:5 Changed 9 years ago by Jared Jurkiewicz

Milestone: tbdfuture

comment:6 Changed 8 years ago by Jared Jurkiewicz

Resolution: wontfix
Status: newclosed

This isn't really fixable. IE is triggering the scrollbars with its border focus controls for images. We have no way to detect that, or turn it off. Marking wontfix.

Note: See TracTickets for help on using tickets.