Solved

Absolute Position inside a OverFlow

Posted on 2006-10-19
4
262 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

632 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