CSS

[ghost]

How can I edit the CSS? It keeps closing when viewing on chrome console.

[taylorwc]

The default styles are set in one of the js files for the package. For example, in your local directory, check out .meteor > local > build > programs > web.browser > packages > mizzao_autocomplete.js ... then look at the positionContainer function starting at line 487:

AutoComplete.prototype.positionContainer = function() {                                                   // 449
    var offset, pos, position, rule;                                                                        // 450
    position = this.$element.position();                                                                    // 451
    rule = this.matchedRule();                                                                              // 452
    offset = getCaretCoordinates(this.element, this.element.selectionStart);                                // 453
    if ((rule != null) && isWholeField(rule)) {                                                             // 454
      pos = {                                                                                               // 455
        left: position.left,                                                                                // 456
        width: this.$element.outerWidth()                                                                   // 457
      };                                                                                                    // 458
    } else {                                                                                                // 459
      pos = {                                                                                               // 460
        left: position.left + offset.left                                                                   // 461
      };                                                                                                    // 462
    }                                                                                                       // 463
    if (this.position === "top") {                                                                          // 464
      pos.bottom = this.$element.offsetParent().height() - position.top - offset.top;                       // 465
    } else {                                                                                                // 466
      pos.top = position.top + offset.top + parseInt(this.$element.css('font-size'));                       // 467
    }                                                                                                       // 468
    return this.tmplInst.$(".-autocomplete-container").css(pos);                                            // 469
  };              

That said, the simplest thing is probably to create an override in the appropriate CSS file in your meteor app. For example, you can edit the entire container with a rule for the class .-autocomplete-container.

[aviemet]

I'm a little confused about the position "bottom" offset choices. This displays the results directly under the text in the input field, not directly under the input field. It looks very strange. Instead of adding the font-size to the offset, shouldn't it add the height of the input? Is there a use case where the input triggering the results wouldn't be an input field?

[micktaiwan]

Someone fixed the pb described just above?

[avram-battery]

Bumping an old thread, it seems this issue hasn't been addressed yet.

Would really like the ability to specify whether the results will be aligned to the text or to the input box. Perhaps there could be a setting in rules like alignToInput which defaults to false.

[ddaydd]

this is my solution you can try...

.-autocomplete-container {
  margin-top: 20px;
  margin-left: 5px;
  .searchResult {
    padding: 2px;
  }
}

[avram-battery]

I did override the css to nudge the results down a little, but I still think there is value in integrating this behavior. A margin of 20px may work for your styling, but it's not universal. I think it would be trivial to add this as an option, I may put in the work myself if I have some free time.

[mizzao]

I've been too busy to maintain this lately; would you like to be added as a maintainer on the project?

On Thu, Aug 3, 2017, 7:20 PM avram-battery [email protected] wrote:

I did override the css to nudge the results down a little, but I still think there is value in integrating this behavior. A margin of 20px may work for your styling, but it's not universal. I think it would be trivial to add this as an option, I may put in the work myself if I have some free time.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mizzao/meteor-autocomplete/issues/111#issuecomment-320034514, or mute the thread https://github.com/notifications/unsubscribe-auth/AB-9VNl-6IE4_8HcYHrO3Kr_q39H-efjks5sUgFOgaJpZM4GYDob .