Click here to Skip to main content
15,887,135 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Hi All,

I have below code:-

<input class="input  " name="current_" type="text" placeholder="Search or choose..." id="ac_5_input" autocomplete="off" value="" data-id="location" onclick="populateLocationPanel();  return false;" onchange="populateLocationPanel();  return false;">


<div class="full" id="divLocations" style="width: 100%; overflow: auto; height: 100px; display: none; border: thin solid gray; position: absolute;">
<ul id="ac_5_listbox" class="ms-listbox full">
    <li role="option">
       <input id="item_Ahmedabad" name="15643" type="checkbox"><label for="item_Ahmedabad" title="Ahmedabad"> Ahmedabad
    </li>
    <li>
        <input id="item_Bangalore" name="15644" type="checkbox"><label for="item_Bangalore" title="Ahmedabad"> Bangalore
    </li>
     <li>
        <input id="item_Delhi" name="15645" type="checkbox"><label 
for="item_Delhi" title="Ahmedabad"> Delhi
    </li>
     <li>
        <input id="item_Chennai" name="15645" type="checkbox"><label 
for="item_Chennai" title="Ahmedabad"> Chennai
    </li>
    </ul>
</div>


function populateLocationPanel() 
{
debugger; 
var divLocation = document.getElementById('divLocations');   console.log('divLocation : ' + divLocation.length);    
divLocation.style.position = 'absolute';    
divLocation.style.display = 'block';    
}


So we have one location textbox and div tag which contains all the locations and one Javascript function called populateLocationPanel.

Now problem is that when we click on location textbox then location panel/div is not showing below location Textbox. It is showing somewhere on the html file.

I want location panel to be shown just below the text box like autocomplete.

I want this in Javascript ONLY. As jQuery is not used anywhere in the html file.

Note - Above text box / location div / JS functions are rendering at run time.

We are using Asp.net with C# so at run time we are injecting above elements in HTML.

Kindly help on this.

What I have tried:

I tried to give position as absolute / relative but location panel is now showing below the location textbox.

It is showing somewhere down in the HTML.
Posted
Comments
Member 15627495 23-Aug-22 23:45pm    
locate your 'to appear container' above the good area.
with 'display:none' as css.

so on a click , the css become 'display:[block]' or value needed.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900