MohitC MohitC - 1 year ago 78
CSS Question

Jquery-ui automplete suggestions menu width exceeding input box on smaller viewport

I am using jquery-ui's

autocomplete
with custom
bootstrap
styling.

For all viewports the size of menu panel would be exact same as input box size but if the string in menu is bigger then it just overflows the size of input box.

What I get:

enter image description here

What I want:

enter image description here

I've tried adding width attributes to my css but it doesnt seem to work.

Demo: JSFiddle

Answer Source

Add open callback function like this, jsfiddle

$("#coupon").autocomplete({
    minLength: 1,
    source: coupons,
    focus: function( event, ui ) {
        $("#label").val(ui.item.coupon);
        return false;
    },
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
    },
    select: function( event, ui ) {
       $("#label").val(ui.item.coupon);
        return false;
    },
    }).autocomplete("instance")._renderItem = function (ul, item) {
         return $("<li>")
             .append(item.label+ '<br><small class="form-text text-muted">' + item.desc+ '</small>')
             .appendTo(ul);
     };
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download