Input text serach hiding,

HTML & CSS
1

Hi,

i have a little issue with a aspx page, the input search box predictive text like the one in google is going under the page div,

The text prediction list is getting hidden under the page design elements,

Please help, thanks a lot,

2

It sounds like this could be a z-index css issue.

Post your code and css and somebody will be able to look at it for you.

3

Thanks for ur help,

Here is the aspx page code,

<tr><td height=“41px” align=“left” id=“Explorer” >
<!-- Table –>

&lt;link href="searchsheet.css" rel="stylesheet" /&gt;

<script type=“text/javascript”>
function ShowImage()
{

}
function HideImage()
{

}
</script>

  &lt;table width="100&#37;" border="0" cellspacing="0"  cellpadding="0"&gt;
  &lt;tr&gt;&lt;td width="34%"  &gt;Destination Explorer - Know where you want to go?&lt;/td&gt;

<td width=“22%” ><form name=“aspnetForm” method=“post” action=“new-home1.aspx” id=“aspnetForm”>
<div>
<input type=“hidden” name=“__EVENTTARGET” id=“__EVENTTARGET” value=“” />
<input type=“hidden” name=“__EVENTARGUMENT” id=“__EVENTARGUMENT” value=“” />
<input type=“hidden” name=“__VIEWSTATE” id=“__VIEWSTATE” value=“/wEPDwULLTEyMDExNDUzOTIPZBYCAgUPZBYCAgEPZBYCAgcPD2QWBB4Kb25rZXlwcmVzcwULU2hvd0ltYWdlKCkeBm9uYmx1cgULSGlkZUltYWdlKClkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQ9QdGV4dDEkaW1nYnRuR2/Rnafk9qsPOQI6yrw0ENb9lapF7Q==” />
</div>

<script type=“text/javascript”>
//<![CDATA[
var theForm = document.forms[‘aspnetForm’];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

<script src=“/TestHome/WebResource.axd?d=BnGB-zLk7DF2zQif7h9Uhw2&t=633912590785732186” type=“text/javascript”></script>

<script src=“/TestHome/ScriptResource.axd?d=bWkm9ESRo2X65j3YxN6riL59lDQin2d03dbknHaAN-a9BFisVvKeNiFyHDzIVuc_b6bs1aUBk9hoj6vAIWeR3Xp-RdDYWPYvUEN4yDQwxHo1&t=633858426355781250” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=bWkm9ESRo2X65j3YxN6riL59lDQin2d03dbknHaAN-a9BFisVvKeNiFyHDzIVuc_b6bs1aUBk9hoj6vAIWeR3fdIkXN5LwN9NTKfYu6vT7B-WwHlTyrev2zprdj29BTf0&t=633858426355781250” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq_AYX4pW9BQTBp4Zdnx9Y9ZbtSGiuq7E6RHIATqlFXT4w2&t=633982235427550000” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq-Nl-AiqajxeiAAaKxQXVIZ1Ffq1cBtc2KUYGIZPrmmyQ2&t=633982235427550000” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq_8-FeLWw2qFzyxBH-eYaKROr4ZSCO7iql296hExVWM-Q2&t=633982235427550000” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq-xgyxt6RvvV_0FL8OpFxID-F-AUtZySEQ8KkcfFf1h78OhztpEQ5Bl2tDqv01HYYI1&t=633982235427550000” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq_8-FeLWw2qFzyxBH-eYaKRuN0cJC-XTuPxFbN1x7kgyUaTX79oSpGnSpiY2qV-N641&t=633982235427550000” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq94AsDxb2LKkpAdVrtpwYNFlodhpUREOJQvZduIxyCLUpR7aSLYjwV0Y12XdihHOKY1&t=633982235427550000” type=“text/javascript”></script>
<script src=“/TestHome/ScriptResource.axd?d=7OUBBrz0OWp6aECuPZ31pRgWaidHoydQLDHKoBl6vq_0rqjjuSWOkgRaECBuFJw0stSw0__1Dl0sfL0T56VsAtNiqp3VrVMKy0QzFu00v-Y1&t=633982235427550000” type=“text/javascript”></script>
<script src=“WebService.asmx/jsdebug” type=“text/javascript”></script>
<div>

&lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLh3dmAAQLxrfCeDQLRkvv+AqlppcjWooz+v403zeNg81HJqgg0" /&gt;

</div>
<script type=“text/javascript”>
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize(‘Ptext1$ScriptManager1’, document.getElementById(‘aspnetForm’));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(, , , 90);
//]]>
</script>

 &lt;div id="Ptext1_UpdateProgress1" style="display:none;"&gt;

<img id=“Ptext1_Image1” src=“images/ajax-loader.gif” style=“border-width:0px;” />

</div>

  &lt;input name="Ptext1$txtAuto" type="text" id="Ptext1_txtAuto" class="input" onkeypress="ShowImage()" onblur="HideImage()" style="height:16px;width:200px;" /&gt;
  &lt;td width="4%"&gt;
 &lt;input type="image" name="Ptext1$imgbtnGo" id="Ptext1_imgbtnGo" src="images/go_img.gif" style="height:18px;width:28px;border-width:0px;" /&gt;&lt;/td&gt;

<script type=“text/javascript”>
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {“associatedUpdatePanelId”:null,“displayAfter”:500,“dynamicLayout”:true}, null, null, $get(“Ptext1_UpdateProgress1”));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.AutoCompleteBehavior, {“completionListCssClass”:“AutoCompleteExtender_CompletionList”,“completionListItemCssClass”:“AutoCompleteExtender_CompletionListItem”,“delimiterCharacters”:“\”,\“;”,“firstRowSelected”:true,“highlightedItemCssClass”:“AutoCompleteExtender_HighlightedItem”,“id”:“Ptext1_AutoCompleteExtender1”,“minimumPrefixLength”:2,“serviceMethod”:“GetCompletionList”,“servicePath”:“WebService.asmx”}, {“populated”:HideImage,“populating”:ShowImage}, null, $get(“Ptext1_txtAuto”));
});
//]]>
</script>
</form>

</td>

    &lt;td width="13%"&gt;&lt;a href="/de/world.html" class="white"&gt;Or explore here &gt;&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;td width="9%" &gt;&lt;a href="/de/world.html"&gt;&lt;img src="/gifs/head/explore_map.gif" align="middle" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;td width="18%"&gt;&lt;a href="#" class="sponsore" &gt;Sponsored Link&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

<!–Explore Link/–>
<!–Container–></tr>
<tr>
<td align=“center” valign=“top” colspan=“2”>
<table width=“1000px” border=“0” cellspacing=“0” cellpadding=“0” class=“home_top”>

			&lt;tr&gt;
			
				&lt;td align="left" valign="top" width="700px" &gt;
			
						&lt;div id="wrapper"&gt;
								&lt;div id="gallery"&gt;

The problem is that the predictive text which comes up like some types the first 2 letters and a list comes for that terms starting with those letter, like the one google search shows, my problem is that the additional predivtive text in the input search area is getting hidden under the div id wrapper and gallerym means the input text search is going under the page div - the input search data is pulled dynamically through dot net and aspx…