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.