Open ghost opened 8 years ago
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
.
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?
Someone fixed the pb described just above?
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.
this is my solution you can try...
.-autocomplete-container {
margin-top: 20px;
margin-left: 5px;
.searchResult {
padding: 2px;
}
}
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.
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 notifications@github.com 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 .
How can I edit the CSS? It keeps closing when viewing on chrome console.