Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Absolute Position inside a OverFlow

Posted on 2006-10-19
4
Medium Priority
?
269 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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 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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

715 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