Solved

DIV tag overlapping other elements when content is added dynamically

Posted on 2007-03-28
10
852 Views
Last Modified: 2013-11-19
I have a <DIV> with a <UL> inside. When the page loads, several <LI> elements are dynamically created inside the <UL> using createElement(). The page has no trouble automatically calculating the length of div, and everything fits nicely.

However, I have a function that adds new <LI> elements to the <UL>. And while the DIV resizes appropriately, the distance between the div and the elements below it doesn't seem to adjust. So while the DIV gets longer to accommodate the new list elements, it starts to overlap the things below it.

What it should look like: http://aaronkarp.com/random/notspillingtags.png
What actually happens: See http://aaronkarp.com/random/spillingtags.png 

Does anyone have any suggestions?

Here is the CSS for the DIV:

padding-top: 8px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
margin-right: 10px;
line-height: 18px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow-x: hidden;
overflow-y: hidden;
0
Comment
Question by:aaron_karp
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 28

Accepted Solution

by:
TName earned 100 total points
ID: 18814612
Is the other element (nav-bar? "about", "contact", "bugs"...) positioned absolutely? Is there any inline formatting (position) for the div?
0
 
LVL 11

Assisted Solution

by:alexcohn
alexcohn earned 300 total points
ID: 18814708
The following simple test works fine (in IE 6):

<head>
    <style>
#uldiv {
padding-top: 8px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
margin-right: 10px;
line-height: 18px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow-x: hidden;
overflow-y: hidden;
background: green;
}
    </style>
</head>
<body>
<div id="uldiv"><ul id="ul"><li>book</li><li>Carrier search</li><li>abcdef</li></ul></div>
text
<a onclick="oLi=document.createElement('li'); oLi.innerText ='dynamic list item'; ul.appendChild(oLi); return false;" href="#">add li</a>
</body>
0
 

Author Comment

by:aaron_karp
ID: 18816632
I'm sorry I should have specified that this is only happening in Firefox (tested in 2.0.03).
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Assisted Solution

by:fuzzboxer
fuzzboxer earned 100 total points
ID: 18819020
Have you tried applying a clear to the div?

Add "clear:both;" to your div class.
0
 
LVL 11

Assisted Solution

by:alexcohn
alexcohn earned 300 total points
ID: 18820079
The above code, with the obvious change:

<a onclick="oLi=document.createElement('li'); oLi.appendChild(document.createTextNode('dynamic list item')); document.getElementById('ul').appendChild(oLi); return false;" href="#">add li</a>

works fine on FireFox 1.5.0.11 - there is no reason why 2.0 should behave differently. So, there probably is someting else in your page that screws the things up... The only way I could cause the behavior you experienced, was by using a div for text with fixed top position:

<div style="position: absolute; top: 110px;">text</div>
0
 

Author Comment

by:aaron_karp
ID: 18833255
Ok, so this is weird. By comparing the page that has this problem, to another page without the problem, I was able to figure out that the problem is related to the presence of a dynamically generated select menu on the page. This select menu allows users to add or remove tags from checked elements on the page.

Here is the HTML generated by this javascript : http://aaronkarp.com/random/generated_select_menu_html.png

And here is the javascript, which is called onLoad();
The myTags variable is a global array holding all of the user's tags and their IDs.
If I comment out the very last line of the function, which sets the innerHTML of a container (massEditNotesDropdownContainer) to the HTML of the select menu, the original problem of the overlapping div content goes away.

function generateMassEditNotesDropdown() {
      var selectHTML = "<select id='massEditNotesDropdown' class='inlineApplyTagSelect' onChange='applyMassEdit(this.value)'><option value='0' style='color:#aca899'>Tags...</option>";
      if (myTags.length) selectHTML += "<option value='0' disabled='disabled'>Apply Tag</option>";
      myTags.sort(sortTagArrayByTagName); // to reset indicies
      // And option for each tag
      for(var i=0; i<myTags.length; i++) {
            selectHTML += "<option value='apply" + myTags[i]['TagId'] + "'>&nbsp;&nbsp;" + myTags[i]['TagName'] + "</option>";
      }
      if (myTags.length) selectHTML += "<option value='0' disabled='disabled'>Remove Tag</option>";
      for(var i=0; i<myTags.length; i++) {
            selectHTML += "<option value='remove" + myTags[i]['TagId'] + "'>&nbsp;&nbsp;" + myTags[i]['TagName'] + "</option>";
      }
      selectHTML += "<option value='0' disabled='disabled'>----</option>";
      selectHTML += "<option value='new'>New Tag &gt;&gt;</option></select>";
      $('massEditNotesDropdownContainer').innerHTML = selectHTML;
}
0
 
LVL 11

Assisted Solution

by:alexcohn
alexcohn earned 300 total points
ID: 18834721
Generally speaking, it's unsafe to create HTML element by assigning innerHTML; but it does work. When SELECT is dynamically added to the DIV, there is no overlap. If you could make available the page, not the screenshots, it could be easier to find your problem.
0
 

Author Comment

by:aaron_karp
ID: 18873694
Ok, so here are some more clues.

As I mentioned earlier, the problem is somehow related to the select menu, which is automatically generated. When someone adds a new Tag to the box on the left, I call generateMassEditNotesDropdown() again, in order to refresh the select menu with the new tag.

If I comment out the call to generateMassEditNotesDropdown() when a new tag is added, the problem with the overlapping DIV goes away.

Also, if I put a simple alert('hello'); at the very top of the function, the problem goes away.

Any idea why putting an "alert" is helping? Is it stalling the refresh of the dropdown? And maybe that's giving the lower part of the page enough time to redraw?
0
 

Author Comment

by:aaron_karp
ID: 18874296
I've basically solved this by putting a .5 second setTimeout() on the second call to generateMassEditNotesDropdown
0
 
LVL 11

Expert Comment

by:alexcohn
ID: 18880611
Oh, it was very unclear from your post what was the relationship between  generateMassEditNotesDropdown() and the screenshots you produced... setTimeout() is a very popular workaround for many Javascript glitches, that's true.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question