Click here to Skip to main content
11,711,750 members (80,557 online)
Click here to Skip to main content

DropDownList and DIV overlapping problem

, 28 Aug 2007 CPOL 92.8K 540 29
Rate this:
Please Sign up or sign in to vote.
The problem of displaying a tool tip against a control in a div

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)

Share

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

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
ramsrk8-Mar-11 23:14
memberramsrk8-Mar-11 23:14 
GeneralMy vote of 5 Pin
Member 378478218-Aug-10 23:37
memberMember 378478218-Aug-10 23:37 
QuestionIssue if DropDownList is expanded Pin
Jawad Munir21-Jan-09 3:38
memberJawad Munir21-Jan-09 3:38 
AnswerRe: Issue if DropDownList is expanded Pin
Khalil Ahmad21-Jan-09 18:36
memberKhalil Ahmad21-Jan-09 18:36 
AnswerRe: Issue if DropDownList is expanded Pin
Jawad Munir21-Jan-09 21:13
memberJawad Munir21-Jan-09 21:13 
GeneralRe: Issue if DropDownList is expanded Pin
Khalil Ahmad24-Jan-09 19:49
memberKhalil Ahmad24-Jan-09 19:49 
GeneralRe: Issue if DropDownList is expanded Pin
Jawad Munir25-Jan-09 23:32
memberJawad Munir25-Jan-09 23:32 
GeneralRe: Issue if DropDownList is expanded Pin
Khalil Ahmad26-Jan-09 19:06
memberKhalil Ahmad26-Jan-09 19:06 
GeneralGood Tip! Pin
randigb24-Nov-08 8:23
memberrandigb24-Nov-08 8:23 
GeneralProblem with putting javascript Pin
akjal1-Apr-08 6:36
memberakjal1-Apr-08 6:36 
GeneralRe: Problem with putting javascript Pin
Khalil Ahmad2-Apr-08 22:11
memberKhalil Ahmad2-Apr-08 22:11 
GeneralGreat Script! Pin
Anthony DiMauro1-Apr-08 5:20
memberAnthony DiMauro1-Apr-08 5:20 
GeneralNot Working in Firefox Mozilla Pin
AbhinavNigam12-Mar-08 19:10
memberAbhinavNigam12-Mar-08 19:10 
GeneralRe: Not Working in Firefox Mozilla Pin
Khalilskp13-Mar-08 0:09
memberKhalilskp13-Mar-08 0:09 
GeneralConforming to Web Standards Pin
DinoSaadeh8-Sep-07 3:24
memberDinoSaadeh8-Sep-07 3:24 
GeneralRe: Conforming to Web Standards Pin
Michael J. Collins24-Sep-07 8:39
memberMichael J. Collins24-Sep-07 8:39 
QuestionNot working in Mozilla Pin
HemaRawat6-Sep-07 20:47
memberHemaRawat6-Sep-07 20:47 
AnswerRe: Not working in Mozilla Pin
Khalil Ahmad16-Sep-07 18:14
memberKhalil Ahmad16-Sep-07 18:14 
GeneralNot working in Mozilla Pin
HemaRawat6-Sep-07 20:45
memberHemaRawat6-Sep-07 20:45 
GeneralReally gr8 Pin
TariqFayyaz3-Sep-07 21:51
memberTariqFayyaz3-Sep-07 21:51 
GeneralGreat Idea Pin
merlin98129-Aug-07 5:38
membermerlin98129-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 | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 29 Aug 2007
Article Copyright 2007 by Khalil Ahmad
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid