• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

Absolute Position inside a OverFlow

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
eguilherme
Asked:
eguilherme
1 Solution
 
eguilhermeAuthor Commented:
ps. the select must be absolute positioned since it will be dynamicly placed.. (thats why the js also)
0
 
harshgroverCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now