Closed Bug 89596 Opened 23 years ago Closed 23 years ago

Rewriting overflow text in DIV using innerHTML does not work.

Categories

(Core :: DOM: Core & HTML, defect)

Product:
Core
Component:
DOM: Core & HTML
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
VERIFIED WORKSFORME

People

(Reporter: pete, Assigned: jst)

Details

(Keywords: testcase)

Attachments

(1 file)

testcase
2.56 KB, text/html
Details 
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>
//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));

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.
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
Marking NEW based on confirmation.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
OS: Linux → All
Hardware: PC → All
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.
WORKSFORME.
Status: NEW → RESOLVED
Closed: 23 years ago
Resolution: --- → WORKSFORME
verified worksforme, adding the reporters testcase as attachement.
Status: RESOLVED → VERIFIED
Attached file testcase — 

    
  
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.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: