Solved

Absolute Position inside a OverFlow

Posted on 2006-10-19
4
204 Views
Last Modified: 2012-05-05
suppose i have a html like this:



<!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><title>
      Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="testePosicionamento.aspx" id="form1">
<div>

</div>

    <div>
        <div style="overflow:scroll;width:600px;height:100px;">
      z
      <br />
      Z
      <br />
      z
      <br />
      Z
      <br />
      z
      <br />
       z
      <br />
      Z
      <br />
      z
      <br />
      Z
      <br />
      z
      <br />
      Z

 <script language="javascript" type="text/javascript">
   

    function lugarCerto(ref){
        var targ = document.getElementById('teste');
        targ.style.top = ref.offsetTop+10;
        targ.style.left = ref.offsetLeft;
       
       
       
    }
</script>

<input type="text"  onKeyDown="document.getElementById('teste').style.visibility = 'visible';lugarCerto(this);" onBlur="document.getElementById('teste').style.visibility = 'hidden';" />
<br />
<div id="teste" style="background-color:Blue;visibility:hidden;position:absolute;top:0px;left:0px;">
    <select size="4" >
</select>
</div>
Resultado
    </div>
        <br />

<div>
</div></form>
</body>
</html>

copy and paste and press a key at the input text..
see where the select appears ?.. if i remove the overflow it goes ok.. but i do need the overflow.. so how can i make the div with absolute position (the div of the select) be absolute positioned INSIDE the overflow ?
0
Comment
Question by:eguilherme
4 Comments
 
LVL 10

Author Comment

by:eguilherme
ID: 17768704
ps. the select must be absolute positioned since it will be dynamicly placed.. (thats why the js also)
0
 
LVL 2

Accepted Solution

by:
harshgrover earned 500 total points
ID: 17776470
modify the onKeyDown for the input type="Text" as below

onKeyDown="document.getElementById('teste').style.visibility = 'visible';document.getElementById('teste').style.position=absolute;lugarCerto(this);"

basically, when you say
document.getElementById('teste').style.visibility = 'visible';
 it overwrites the style parameter, so you need to set the style completely again.

a better way to do this could be using CSS, and modifying the className for the "teste" selectbox.

lemee know if you need help with CSS and i'll pass on the code for the same


0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

707 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

12 Experts available now in Live!

Get 1:1 Help Now