Solved

DIV tag overlapping other elements when content is added dynamically

Posted on 2007-03-28
10
807 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
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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now