发表新帖
发表新帖

Changing width of jquery-ui autocomplete widgets individually

前端 未结
关注
11 871
挽巷
挽巷 2020-12-14 16:42

I\'m working with mutiple jquery-ui autocomplete widgets on one page and want to be able to set the widths of each one individually. Currently, I\'m doing it like this:

相关标签:
11条回答
  • 天涯浪人
    2020-12-14 17:06

    As of jQuery UI 1.10, the autocomplete widget was rewritten using the widget factory. As part of that, the autocomplete now contains a _resizeMenu extension point, which is called when sizing the menu before displaying. 

    $('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});
    0 讨论(0)
  • 广开言路
    2020-12-14 17:11

    I like luqui's answer. But if you are in a situation where you cannot use the appendTo feature (could be due to overflow hidden etc.), you can use the code below to make sure that you are making changes to the correct list. 

    $('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

    Ref: http://docs.jquery.com/UI/Autocomplete#method-widget

    0 讨论(0)
  • 深忆病人
    2020-12-14 17:13

    Without using extra Javascript code, you can use 1 simple CSS line:

    <style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

    So why does this work with min-width?

    Simply because width gets overwritten by the JS, sometimes even with solutions that use open: function(event, ui) { ... } (like rkever's answer, which did not work in my case). However, min-width is not overwritten, so it comes in handy.

    Also, if you do not want to use !important, you can further detail the rule with the remaining classes:

    .ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

    This avoided me further JS hacks, hope it helps!

    0 讨论(0)
  • 灰色年华
    2020-12-14 17:13

    I managed to solve this with CSS by adding float to the autocomplete menu.

    .ui-autocomplete { float: left; }

    Since the autocomplete menu is positioned absolute and a direct child of the <body>. I guess it gets it's max width from the body, and since it's position absolute it can't be displayed as inline-block to avoid taking all the available space.

    Also .ui-autocomplete { width: 1%; } seems to work.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-14 17:19

    Reading API, I've just add a class ui-front to the parent's div of my input, and that works fine.

    <div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

    See here :

    [...] the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

    The appended element determine the position and width of the menu.

    0 讨论(0)
 看不清?
提交回复
热议问题