My div is set up to show a line of text and it does that successfully. Later in the code I set the innerHTML of the div to show 15 lines of text and it only shows the 1st line.
I thought that block elements like divs automatically 'grow' based on their content -- and note that I'm not using any CSS that would affect the div in 'hiding' the overflow. Note that I put a 3-pixel-wide solid purple border around this div so I could visually assess its size as I change its 'innerHTML' from 1 line of text to 15 lines of text.
<div class="rbAdsLinksDiv" id="adLinksArea" style="border: 3px solid purple;">
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
</div>
When the web page first appears, it correctly shows that one line of text in the div:
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
Here is the CSS:
.rbAdsLinksDiv
{
margin-top: 5px;
}
Here is my PHP code that generates javascript to fill the div with 15 lines of new text:
$html = <<<HEREDOC
"<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>3) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>4) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>5) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>6) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>7) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>8) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>9) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>10) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>11) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>12) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>13) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>14) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>15) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
HEREDOC;
$outStr = "document.getElementById('adLinksArea').innerHTML = $html";
echo $outStr;
To make sure 'outStr' is correct, I display the contents of it in an iframe on my web page and yes indeed, all 15 lines of html code are there.
I expected to see all 15 lines above but all I see in the div is:
1) HEY WHERE ARE ALL THE AD LINKS?
and all the other 14 lines are missing.
I thought that when you update the 'innerHTML' of a div with more content that the div should automatically expand to show everything -- is that an incorrect assumption on my part? And if so, what do I need to do so that the div grows in size based on the number of lines of text, which will not always be 15 lines?
One of the things I tried in attempting to figure this out is instead of only 1 line of text, the div has 5 lines of text when it first appears on the page:
<div class="rbAdsLinksDiv" id="adLinksArea" style="border: 3px solid purple;">
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
</div>
THE ABOVE SHOWS CORRECTLY ON THE WEB PAGE -- I do in fact see all 5 lines of the above text on the web page when the page first loads.
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
Then I change the 'innerHTML' of the div to display the 15 lines of text as above -- and the div shrinks and only shows me one line of the new text:
1) HEY WHERE ARE ALL THE AD LINKS?
So all the other 14 lines are not visible. I'm missing something basic here?
