locked
JQuery UI Autocomplete multiple select text box text going hidden left side RRS feed

Answers

  • User281315223 posted

    Is there any reason that you are using this particular autocomplete handler?

    It doesn't appear to have very decent documentation, which can make it a bit difficult to deal with and it seems to rely on the jQueryUI library for styling. Additionally, if you look at the source for the actual plug-in, you'll see that it even refers to the way that it resizes as "hackish" :

    function autoSize(e){
                    // Hackish autosizing
                    var $this = $(this);
                    $this.width(1).width(this.scrollWidth+fontSize-1);
    };

    I know that I've personally used the Chosen plug-in to handle similar functionality like this before, which you might want to consider exploring. Or simply look into finding a different, better documented option as the only way you'll get the functionality that you are trying to achieve is by changing the source of this plugin.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 8, 2015 8:50 AM

All replies

  • User281315223 posted

    I'm having trouble figuring out exactly what styles you are trying to change. Could you try posting a more detailed explanation behind them and specifically what you want to change about the autocompletion or its styling?

    Tuesday, December 23, 2014 7:49 AM
  • User1610382325 posted

    Hi Rion,
    This is my actual code as per the sample which i have posted link.

    <div class="wrapper" style="margin-top: 150px;">
    <input id="myAutocomplete" type="text" />
    </div>

    While running dynamically its getting changed width:19px like below.
    <input class="ui-autocomplete-input" id="myAutocomplete" style="width: 19px;" type="text" autocomplete="off"/>

    Due to this Autocomplete INPUT text box text going -z index . Not full text visible. I am trying to over ride the width maximum but i am not able to achieve.  $('#myAutocomplete').attr('style', 'width: 100px !important');

    Any idea.

    Tuesday, December 23, 2014 12:50 PM
  • User1610382325 posted

    Hi Rion,
    Did you got my point.  Where I am facing the issue.

    If you look at the link there is a sample. Just put it in your local copy and see. You came to know. 

    Regards,
    Ponraj

    Wednesday, December 24, 2014 12:31 AM
  • User1918509225 posted

    Hi Ponraj.sam,

    If you want to modify the css style in the multiple plugin ,you need to download the src of the plugin.

    And check the source code,and modify the css style based your requirement.

    Best Regards,

    Kevin Shen.

    Thursday, January 8, 2015 12:38 AM
  • User-961034843 posted

    This is the which give u proper answer:  http://www.dotnethelps.com/JQuery.aspx

    Thursday, January 8, 2015 12:46 AM
  • User281315223 posted

    Is there any reason that you are using this particular autocomplete handler?

    It doesn't appear to have very decent documentation, which can make it a bit difficult to deal with and it seems to rely on the jQueryUI library for styling. Additionally, if you look at the source for the actual plug-in, you'll see that it even refers to the way that it resizes as "hackish" :

    function autoSize(e){
                    // Hackish autosizing
                    var $this = $(this);
                    $this.width(1).width(this.scrollWidth+fontSize-1);
    };

    I know that I've personally used the Chosen plug-in to handle similar functionality like this before, which you might want to consider exploring. Or simply look into finding a different, better documented option as the only way you'll get the functionality that you are trying to achieve is by changing the source of this plugin.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 8, 2015 8:50 AM
  • User1610382325 posted

    Thanks Rion. 

    Its working fine now. 

    Sunday, January 11, 2015 6:44 AM