#39 new
jean

Autocompleter set automatic width to div.autocomplete

Reported by jean | July 8th, 2008 @ 04:06 PM

When I create a new autocompleter object the autocompleter tool set an automatic width to the div which displays the results.

Even if I set a css rule for this width the tool overwrites it.

I don't know if it is a bug or not, but this problem causes several matters in displaying results... expecially whe the result string is longer than the auto-width set by the tool.

Thanks for the attention.

Comments and changes to this ticket

  • infringer

    infringer October 20th, 2008 @ 07:47 PM

    I hacked the code to allow me to change the width.

    Here is what I did, in controls.js:

    Starting at Line #60 here is what I changed it to:

    this.options.paramName    = this.options.paramName || this.element.name;
    this.options.tokens       = this.options.tokens || [];
    this.options.frequency    = this.options.frequency || 0.4;
    this.options.minChars     = this.options.minChars || 1;
    this.options.updateWidth  = this.options.updateWidth || this.element.getWidth();
    this.options.onShow       = this.options.onShow ||
      function(element, update){
        if(!update.style.position || update.style.position=='absolute') {
          update.style.position = 'absolute';
          Position.clone(element, update, {
            setHeight: false,
            setWidth: false,
            offsetTop: element.offsetHeight
          });
        update.setStyle({ width: this.options.updateWidth + "px"});
        }
        Effect.Appear(update,{duration:0.15});
      };
    
    

    You see what I did was create a new option "updateWidth" and it is either set to the updateWidth supplied or the element's width.

    In the Position.clone function I set "setWidth" to false.

    Then I set update's width to the "updateWidth" variable.

    Maybe not the best way to work it but it works for me.

    -David

  • infringer

    infringer October 21st, 2008 @ 05:39 PM

    Sorry this doesn't work as expected. It loses focus on "this"

    So it sets the width to nothing causing the autocompleter not to show.

    Here's what I have done to correct the problem. Notice I changed the width operation to the "show" function instead of the onshow declaration.

    Starting at line 60 again:

    this.options.paramName    = this.options.paramName || this.element.name;
    this.options.tokens       = this.options.tokens || [];
    this.options.frequency    = this.options.frequency || 0.4;
    this.options.minChars     = this.options.minChars || 1;
    this.options.updateWidth  = (this.options.updateWidth || this.element.getWidth()) + "px";
    this.options.onShow       = this.options.onShow ||
      function(element, update){
        if(!update.style.position || update.style.position=='absolute') {
          update.style.position = 'absolute';
          Position.clone(element, update, {
            setHeight: false,
            setWidth: false,
            offsetTop: element.offsetHeight
          });
        }
        Effect.Appear(update,{duration:0.15});
      };
    this.options.onHide = this.options.onHide ||
      function(element, update){ new Effect.Fade(update,{duration:0.15}) };
    
    if(typeof(this.options.tokens) == 'string')
      this.options.tokens = new Array(this.options.tokens);
    // Force carriage returns as token delimiters anyway
    if (!this.options.tokens.include('\n'))
      this.options.tokens.push('\n');
    
    this.observer = null;
    
    this.element.setAttribute('autocomplete','off');
    
    Element.hide(this.update);
    
    Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
    Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
    
    

    },

    show: function() {

    this.update.setStyle({ width: this.options.updateWidth });
    if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
    if(!this.iefix &&
      (Prototype.Browser.IE) &&
      (Element.getStyle(this.update, 'position')=='absolute')) {
      new Insertion.After(this.update,
       '<iframe id="' + this.update.id + '_iefix" '+
       'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
       'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
      this.iefix = $(this.update.id+'_iefix');
    }
    if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
    
    

    },

  • Justin

    Justin February 14th, 2009 @ 10:42 AM

    A workaround is to use ! important in your CSS style sheet - e.g.: div.autocomplete { width: 200px ! important; }

    This seems to override the inline style that scriptaculous assigns

  • Osiris

    Osiris July 7th, 2009 @ 12:46 PM

    This works better for me...

    @@@javascript new Ajax.Autocompleter('input_field', 'list_div_choices', 'ajax.php?' + url_query,

       {paramName: 'fragment',
        minChars: 3,
        afterUpdateElement: function(sel_data,sel_elem){
            foo();
            },
        onShow: function(element, update){
                if(!update.style.position || update.style.position=='absolute') {
                  update.style.position = 'absolute';
                  Position.clone(element, update, {
                    setHeight: false,
                    setWidth: false,
                    offsetTop: element.offsetHeight
                  });
                }
                update.setStyle({width:'300px'});
                Effect.Appear(update,{duration:0.15});
              }
        }
        );
    
    
    It's inspired in your solution. Thanx
    
  • Bilgin Ibryam

    Bilgin Ibryam December 27th, 2009 @ 10:34 AM

    I think the code should set only the minWidth to div.autocomplete, and let the default with:

        this.options.onShow       = this.options.onShow ||
          function(element, update){
            if(!update.style.position || update.style.position=='absolute') {
              update.style.position = 'absolute';
              update.style.minWidth =  element.offsetWidth + 'px';
              Position.clone(element, update, {
                setHeight: false,setWidth: false,
                offsetTop: element.offsetHeight
              });
            }
            Effect.Appear(update,{duration:0.15});
          };
    

    WDYT?
    Bilgin

  • jayanthchandra176

    jayanthchandra176 January 12th, 2018 @ 03:15 PM

    Iceland and Panama will be the only countries to make their debuts in your competition. Slovakia were the previous debutants to attain the knockout levels this year 2010.
    2018 fifa world cup schedule pdf
    FIFA World Cup 2018 Venues
    FIFA World Cup 2018 Opening Ceremony Venue

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages