Hi,
I'm working with AutoCompleteBox and have problem with dropdown list position.
I build a site with 2 nested Master Pages. As you see in attachment:
- One is marked Red, the container, fixed position.
- One is marked Blue (main content) is nested in the Red. The content in Blue is scrollable if it is too long.
I use AutoCompleteBox within the Blue.
The issue is that, after the dropdown list appears (see FirstAppear.png), I scroll down the Blue area. The dropdown list is not move along with the textbox, but seems to be fixed at the screen (see AfterScrolling.png)
View HTML source I see that the dropdown list is generated as <div>, placed as the first child of <form> element (wherever the AutoCompleteBox is)
I found is that <div> has position: absolute, but there is not parent tag has position: relative. Therefore, the <div> relates to the top-most <html> tag - Red Area, this area is not move when we scroll the Blue area up/down.
I think that's why we see the dropdown list not scroll up/down belong with the Blue area.
<html>
<body>
...
<form name="aspnetForm" id="aspnetForm"... >
<div class="racSlide" style="left: 282.22px; top: 159.95px; ...">
...
</div>
...
</form>
...
</body>
</html>
Please help to have investigation.
Thanks.
I'm working with AutoCompleteBox and have problem with dropdown list position.
I build a site with 2 nested Master Pages. As you see in attachment:
- One is marked Red, the container, fixed position.
- One is marked Blue (main content) is nested in the Red. The content in Blue is scrollable if it is too long.
I use AutoCompleteBox within the Blue.
The issue is that, after the dropdown list appears (see FirstAppear.png), I scroll down the Blue area. The dropdown list is not move along with the textbox, but seems to be fixed at the screen (see AfterScrolling.png)
View HTML source I see that the dropdown list is generated as <div>, placed as the first child of <form> element (wherever the AutoCompleteBox is)
I found is that <div> has position: absolute, but there is not parent tag has position: relative. Therefore, the <div> relates to the top-most <html> tag - Red Area, this area is not move when we scroll the Blue area up/down.
I think that's why we see the dropdown list not scroll up/down belong with the Blue area.
<html>
<body>
...
<form name="aspnetForm" id="aspnetForm"... >
<div class="racSlide" style="left: 282.22px; top: 159.95px; ...">
...
</div>
...
</form>
...
</body>
</html>
Please help to have investigation.
Thanks.