Opened 10 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)
Change History (8)
Changed 10 years ago by
| Attachment: | ie8_image_selected.png added |
|---|
comment:1 Changed 10 years ago by
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.
- Run this example in IE8. Insert an image and select it. A scrollbar will appear
- 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 10 years ago by
| Component: | General → Editor |
|---|---|
| Owner: | anonymous deleted |
comment:3 Changed 10 years ago by
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:
- Click in the editor after the end of the text to move the cursor.
- Click the 'Insert Image' button.
- Click on the right-justify toolbar icon
- 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 10 years ago by
| Attachment: | ie8_image_selected_justify.png added |
|---|
Adding an image after the text, right-justify the contents, and select the image.
comment:4 Changed 10 years ago by
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 10 years ago by
| Milestone: | tbd → future |
|---|
comment:6 Changed 8 years ago by
| Resolution: | → wontfix |
|---|---|
| Status: | new → closed |
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.
A selected image in IE8 causes a scrollbar to be shown