Click here to Skip to main content
Click here to Skip to main content

DropDownList and DIV overlapping problem

By , 28 Aug 2007
Rate this:
Please Sign up or sign in to vote.

Background

When you want to display a tool tip against a control in a div, you might experience some problems like the controls appearing in front and the tool tip text appearing in the background. The problem occurs when the controls on your page have no z-index and you want a div to display the tool tip. The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Drop-down and list boxes do not have a z-index property; these are window level controls. When you want to show a div in a page that contains these controls, you will face an overlapping problem. The following screen shows a drop-down list and a list box control. These controls will overlap the div that shows the tool tip text. This is a well-known problem with the IE 6 browser.

Screenshot - overlapped.jpg

Solution

For example, consider that you have a div in an APSX page and you want to show it on the mouseover of an image. You will write a JavaScript to hide/show this div. In this JavaScript, you will control the position of the div and where to show it. Now if some window controls like combo box or list box exist, then user will not be able to see the whole text in the div, as these controls overlap the div.

There might be many solutions to this problem, but I am using a very simple approach. This approach uses an iframe and it shows an iframe exactly at the div position. Further iframes should have the same height and width as the div.

Screenshot - nooverlapped.jpg

You can easily control the height and width of the iframe, as you already know the div height and width.

Using the code

Place an iframe at the top:

<iframe width="0" scrolling="no" height="0" 
    frameborder="0" class="iballoonstyle" id="iframetop">
</iframe>

Write JavaScript to show this iframe where you want to show the div:

var layer = document.getElementById(divTip.id);
layer.style.display = 'block';
var iframe = document.getElementById('iframetop');
iframe.style.display = 'block';
iframe.style.width = layer.offsetWidth-5;
iframe.style.height = layer.offsetHeight-5;
iframe.style.left = layer.offsetLeft;
iframe.style.top = layer.offsetTop;

In the above JavaScript, divTip.id will be the ID of your div.

Points of Interest

  • .NET Technologies
  • MS CRM
  • BizTalk Server

History

  • 29 August, 2007 -- Original version posted
  • 4 September, 2007 -- Article edited and moved to the main CodeProject.com article base

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Khalil Ahmad
Software Developer (Senior) Xavor
Pakistan Pakistan
An experienced and detail-oriented business professional with superior analyzing, design, development and project management skills

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberramsrk8-Mar-11 23:14 
GeneralMy vote of 5 PinmemberMember 378478218-Aug-10 23:37 
QuestionIssue if DropDownList is expanded PinmemberJawad Munir21-Jan-09 3:38 
AnswerRe: Issue if DropDownList is expanded PinmemberKhalil Ahmad21-Jan-09 18:36 
AnswerRe: Issue if DropDownList is expanded PinmemberJawad Munir21-Jan-09 21:13 
GeneralRe: Issue if DropDownList is expanded PinmemberKhalil Ahmad24-Jan-09 19:49 
GeneralRe: Issue if DropDownList is expanded PinmemberJawad Munir25-Jan-09 23:32 
GeneralRe: Issue if DropDownList is expanded PinmemberKhalil Ahmad26-Jan-09 19:06 
GeneralGood Tip! Pinmemberrandigb24-Nov-08 8:23 
GeneralProblem with putting javascript Pinmemberakjal1-Apr-08 6:36 
GeneralRe: Problem with putting javascript PinmemberKhalil Ahmad2-Apr-08 22:11 
GeneralGreat Script! PinmemberAnthony DiMauro1-Apr-08 5:20 
GeneralNot Working in Firefox Mozilla PinmemberAbhinavNigam12-Mar-08 19:10 
GeneralRe: Not Working in Firefox Mozilla PinmemberKhalilskp13-Mar-08 0:09 
GeneralConforming to Web Standards PinmemberDinoSaadeh8-Sep-07 3:24 
GeneralRe: Conforming to Web Standards PinmemberMichael J. Collins24-Sep-07 8:39 
QuestionNot working in Mozilla PinmemberHemaRawat6-Sep-07 20:47 
AnswerRe: Not working in Mozilla PinmemberKhalil Ahmad16-Sep-07 18:14 
GeneralNot working in Mozilla PinmemberHemaRawat6-Sep-07 20:45 
GeneralReally gr8 PinmemberTariqFayyaz3-Sep-07 21:51 
GeneralGreat Idea Pinmembermerlin98129-Aug-07 5:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 29 Aug 2007
Article Copyright 2007 by Khalil Ahmad
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid