Reputation: 2341
While styling the jQuery autocomplete plugin, I get the following HTML code hardwired to my page:
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>
How can I disable styling from being made through HTML and keep it done via CSS? I don't think my CSS files are overwriting that style.
Any help will do
Upvotes: 9
Views: 29219
Reputation: 1263
This can be done by implementing some changes in the "open" method of Autocomplete.
consider this example:
$('#search_text_box').autocomplete({
source: "<?= $this->baseUrl('items/autocomplete');?>",
minLength: 2,
search: function(){
//$ulForResults.empty();
},
'open': function(e, ui) {
$('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
$('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
$('.ui-autocomplete').append("<div id='autofill_results'><span>2,000</span> results found, showing <span>10</span></div>");
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
};
In this way by changing how and where your autocomplete appears. The 'ul' that shows autocomplete info has class 'ui-autocomplete' you can manipulate its css in this function to show the drop down the way you want.
Upvotes: 7
Reputation: 105081
jQuery autocomplete needs to set some inline styles to position the drop down list under the text box and size it equally.
It doesn't set anything else, so it's completely up to you to provide visual styling of it by setting styles of those classes that are added to it (ie. ui-autocomplete
).
What I'm trying to tell you is this: set the visual aspects of the drop down list that gets displayed and don't worry about positioning and sizing inline styles.
If you do need to override positioning and sizing of this element you can always set your styles as !important
.
ul.ui-autocomplete
{
position: absolute;
left: 100px!important;
top: 0!important;
...
}
Setting margin-top
doesn't do anything since it calculates position every single time it displays the drop down. But you can try setting this:
.ui-autocomplete
{
border-top:5px solid transparent!important;
}
This actually does the trick.
Upvotes: 9