Absolute Positioning relative to textbox

**richyrich** · richyrich, June 11th, 2009 04:10 PM

I have a textbox, to which I want to link a div to show up when a key is pressed, positioned underneath the textbox.

The code I have works fine in FF, but in IE6, the positioning is incorrect and the div appears off to the left of the screen.

The code I have is:-
JS

Code:

function autoComplete(txtbox,listholder,type)
{
    var txt = document.getElementById(txtbox);
    var list = document.getElementById(listholder);
    if (txt.value.length <= 0) {
        list.style.display = 'none';
    } else {
        var posLeft = findPos(txt)[0];
        var posTop = findPos(txt)[1];
        //alert(posLeft + ':' + posTop);
        list.style.left = posLeft;
        list.style.top = posTop + txt.offsetHeight;
        list.style.display = '';
    }
}
function findPos(obj) {
    var oNode = obj;
    var curleft = obj.offsetLeft;
    var curtop = obj.offsetTop;
    if (obj.offsetParent) {
        curleft = 0;
        curtop = 0;
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
    }
    return [curleft, curtop];
}

CSS of the div

Code:

.autoCompleteHolder
{
    position:absolute;
    background-color:#B1B3FF;
    border:solid 1px #336799;
    width:200px;
    height:100px;
    z-index:100;
    overflow:auto;
}

HTML

Code:

<asp:TextBox ID="txtBusiness" runat="server" AutoCompleteType="Disabled" CssClass="textbox8" Width="200px" MaxLength="255" />
<div id="txtBusinessList" class="autoCompleteHolder" style="display:none;"></div>

How can I correct for IE6?

**jmurrayhead** · jmurrayhead, June 11th, 2009 04:14 PM

Try adding a left property to that class, i.e.:

Code:

.autoCompleteHolder
{
    position: absolute;
    left:  300px;
}

**richyrich** · richyrich, June 11th, 2009 04:23 PM

Nope...Didn't make any difference...Also, that messed up FF...

Could it be because I'm using display:none?

**jmurrayhead** · jmurrayhead, June 11th, 2009 04:27 PM

Well, why are you using absolute positioning in the first place? Typically you specify top, left, right, bottom for this...

**richyrich** · richyrich, June 11th, 2009 04:55 PM

I'm using absolute positioning because I want it to float over other objects, which as I understand it is how to achieve this in IE.

Effectively it's an auto complete extender, but I want to be able to do pass back more information to it than the standard extender allows. I need to pass back two pieces of data so that one bit of data is passed to a hidden field when one of the items in the auto complete list is clicked and the textbox is completed with a different piece of data.

I don't think this can be achieved with the auto complete extender. Perhaps I'll just try the auto complete extender and see how it's rendered in IE.

**jmurrayhead** · jmurrayhead, June 11th, 2009 06:13 PM

R, take a look at the following. I created a span with an ID of "floatover" which is also in the CSS markup in the head. Is this what you're trying to accomplish?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
.oneColElsCtr #container {
    width: 46em;
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

#floatover
{
display:block;
position:absolute;
top:5em; left:40em; width:200px;
margin:10px;
border:1px solid #88979E;
background-color:#D8E0D2; color:#000;
text-align: left
}
-->
</style></head>

<body class="oneColElsCtr">

<div id="container">
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <span id="floatover">This box should float over the other content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</span>
    <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

**richyrich** · richyrich, June 11th, 2009 07:00 PM

The problem is really with getting it to float, it's getting it positioned correctly relative to the textbox I want it to appear underneath.

Trying to get the left and top positions of the textbox and then place the position of the floating div directly underneath the textbox. I can't seem to get IE6 to retrieve the correct left and top values.

**jmurrayhead** · jmurrayhead, June 11th, 2009 07:02 PM

Does this apply to you? The IE6 Absolute Positioning Bug

**richyrich** · richyrich, June 11th, 2009 07:13 PM

Originally Posted by jmurrayhead

Does this apply to you? The IE6 Absolute Positioning Bug

I saw that page and tried it, but it didn't help.

Have found an example autocomplete with Javascript so am going to see if I can dissect it...

Will post if I manage to find an answer..

**richyrich** · richyrich, June 12th, 2009 05:14 AM

I tried this code and the box is appearing in the middle of the browser.

Code:

var curleft = document.getElementsByTagName('body')[0].offsetLeft;

So, in order to calculate the position of the textbox, it's starting in the wrong place. I thought the body tag should be at the far left.

Any ideas?

Thread: Absolute Positioning relative to textbox

LinkBack

Thread Tools

Display

Absolute Positioning relative to textbox

Similar Threads

textbox events

CSS positioning woes...

validate empty textbox js

textbox validation

Textbox or List help

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions