Rewriting overflow text in DIV using innerHTML does not work.

VERIFIED WORKSFORME

Status

()

--
major
VERIFIED WORKSFORME
18 years ago
11 years ago

People

(Reporter: pete, Assigned: jst)

Tracking

({testcase})

Trunk
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

18 years ago
If innerHTML is used to rewrite the text in a DIV AND "overflow" is "scroll" or
"auto" AND the text that's written is longer than the size of the DIV, then the
NEXT rewrite of the text will fail.

It's probably easiest to explain with an example test page (see below):

  1. Load test page.
  2. Press "Write Short Text 1" or "Write Short Text 2" which should write a
short sentence to the blue DIV.
  3. Alternatly press the 2 "Short Text" buttons.  This should work fine. problem.
  4. Press "Write Long Text 1" or "Write Long Text 2" which should write a long
sentence (longer than the size of the DIV).  This should work fine.
  5. After step 4, try pressing any of the buttons.  The DIV will go blank.  It
appears overflow text can only be written 1 time.

If the "overflow" value is NOT set to "scroll" or "auto" everything seems to
work OK.

I've also noticed the vertical scroll bar appears even if the DIV contains the
short text or no text.  In the case of "overflow" = "auto", I don't believe the
scroll bar should appear unless it's actually needed.

This bug MIGHT be the same or similar to #46124, but the example code in that
bug didn't seem to be testing the same thing as this one.

I've read in various places that innerHTML is not officially part of DOM.  But,
then I've also read it IS supported by Mozilla.  If innerHTML is not supported
by DOM, then what is the "correct" way to accomplish the same task?

Test page:

<html>
<head>
<style>
  .content {
    top:                    75px;
    left:                  150px;
    width:                 300px;
    height:                100px;

    color:                 white;
    background-color:      blue;

    overflow:              auto;
  }
</style>

<script language="JavaScript">
  function writeShortText1() {
    var text = "This is the 1st short text written when the Write Short Text 1
button is pressed.";
    document.getElementById("Content").innerHTML = text;
  }

  function writeShortText2() {
    var text = "This is the 2nd short text written when the Write Short Text 2
button is pressed.";
    document.getElementById("Content").innerHTML = text;
  }

  function writeLongText1() {
    var text =
      "This is the 1st long text written when the Write Long Text 1 button is
pressed." +
      "<p>" +

      "This is the 1st long text written when the Write Long Text 1 button is
pressed." +
      "  This is the 1st long text written when the Write Long Text 1 button is
pressed." +
      "  This is the 1st long text written when the Write Long Text 1 button is
pressed." +
      "  This is the 1st long text written when the Write Long Text 1 button is
pressed." +
      "  This is the 1st long text written when the Write Long Text 1 button is
pressed." +
    "";

    document.getElementById("Content").innerHTML = text;
  }

  function writeLongText2() {
    var text =
      "This is the 2nd long text written when the Write Long Text 2 button is
pressed." +
      "<p>" +

      "This is the 2nd long text written when the Write Long Text 2 button is
pressed." +
      "  This is the 2nd long text written when the Write Long Text 2 button is
pressed." +
      "  This is the 2nd long text written when the Write Long Text 2 button is
pressed." +
      "  This is the 2nd long text written when the Write Long Text 2 button is
pressed." +
      "  This is the 2nd long text written when the Write Long Text 2 button is
pressed." +
    "";

    document.getElementById("Content").innerHTML = text;
  }
</script>
</head>

<body>
  <form>
    <input type="button" name="writeShort1" value="Write Short Text 1"
onClick="writeShortText1()">
    <input type="button" name="writeLong1"  value="Write Long Text 1" 
onClick="writeLongText1()">

    <p>
    <input type="button" name="writeShort2" value="Write Short Text 2"
onClick="writeShortText2()">
    <input type="button" name="writeLong2"  value="Write Long Text 2" 
onClick="writeLongText2()">
  </form>

  <div id="Content" class="content"></div>
</body>
</html>

Comment 1

18 years ago
//assuming
var msg="your inserted html";
var content="content";
//
document.getElementById(content).innerHTML=msg;
//
//is equivalent to:
//
var n=document.getElementById(content);
var r=document.createRange();
r.setStartAfter(n);
while(n.hasChildNodes()) {n.removeChild(n.firstChild);}
n.appendChild(r.createContextualFragment(msg));
(Reporter)

Comment 2

18 years ago
I retested without using "innerHTML"... using the method descibed by Aaron
Kaluszka (2001-07-06) and the same problem still happens.

I've also tested this same page on Windows ME using Mozilla 2001062815 and it
has the same problem.

Comment 3

18 years ago
I have also stumbled upon this bug in a project of mine.  Since a simple test
case is already created, I won't bother to make a new one.  Same problem though.
 I have a div with overflow set to scroll, I then populate the div with text
that is longer than the height, which works.  Trying it a second time results in
a blank div.  Build 2001062815 on NT 4.0sp6

Comment 4

18 years ago
Marking NEW based on confirmation.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
OS: Linux → All
Hardware: PC → All

Comment 5

18 years ago
I don't know if this is the same thing or not but I found my DIV remained blank
if the text placing in it only occupied one line.
(Assignee)

Comment 6

18 years ago
WORKSFORME.
Status: NEW → RESOLVED
Last Resolved: 18 years ago
Resolution: --- → WORKSFORME

Comment 7

17 years ago
verified worksforme, adding the reporters testcase as attachement.
Status: RESOLVED → VERIFIED

Comment 8

17 years ago
Created attachment 60837 [details]
testcase

Updated

11 years ago
Component: DOM: HTML → DOM: Core & HTML
QA Contact: stummala → general
You need to log in before you can comment on or make changes to this bug.