Jquery autocomplete causing page to scroll unnecessarily
Question
I've got a frustrating issue with Jquery auto-complete. I have UL of drop down options which appears beneath the input. The ui-menu and ui-menu-items are being rendered with width:1214px - I assume this is document width or something. I don't know why this happens, but I can overwrite the CSS to fix it.
Fixing the width causes line breaks in the result list, which is fine. The limited result list still easily fits on the page but for some reason the page height is thrown off and I get a vertical scroll bar.
All the ul and li heights are set to auto in the DOM explorer- why does it cause the page to scroll?
What workarounds are there to keep the autocomplete box inside the lines?
CSS:
.ui-menu {
...
width:245px;
}
.ui-menu-item{
cursor:pointer;
list-style: none;
...
width:245px;
}
JS:
$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
if (index < 10)
{self._renderItem( ul, item );}
});
}
Input:
<input type="text" class="Search" id="search_box"/>
3 answers
solution1
1 2015-06-12 00:59:51
I solved this problem using the appendTo initialization option. I think that the problem is that the absolutely position autocomplete menu is still increasing the height of the body: by setting the appendTo option to a div with height: 0px , I was able to eliminate the problem.
Example:
Javascript:
$( ".selector" ).autocomplete({
appendTo: "#hidden-stuff"
});
HTML:
<body>
<input class="selector" type="text>
<div id="hidden-stuff" style="height: 0px;"></div>
</body>
solution2
1 ACCPTED 2011-04-05 05:43:04
Try to set/overwrite the z-index of the list that drops down on search:
z-index:999 or z-index:1000
I am not sure but it could help. Another solution would be to set the overflow to hidden when user is searching:
So as soon as the user clicks on the input field:
$("html,body").css("overflow","hidden");
And when the input field looses focus:
$("html,body").css("overflow","auto");
However this seems strange to me because jQuery UI should work properly.
solution3
0 2022-06-18 04:45:04
Just place position: fixed into the CSS class ui-autocomplete like this:
.ui-autocomplete
{
position: fixed; /* Prevents page scroll when autosuggestion menu appears */
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.