Google maps autocomplete style
I use in autocomplete of google-maps (without a map) on input.
I need that the list of results will open up and not down like the deafult. So I try to change the style of pac-container and I see that when I change the top or the margin-top the list is open up.
My problem is that I want to change the bottom and not the top, because each different amount of results needs a different top but the bottom can remain constant so it is more correct to change it.
I tried it on div that I created and it works great for any amount of results. Always the list (the div) appears above the input.
But the pac-container is problematic. Its top probably calculated independently and if I do not change it the bottom does not help.
I can calculate the desired top every time or delete it completely in any keydown [I tried and it works] but it just causes delay on the screen, and if I type really fast it is not always enough to get the change.
Is there a way to cancel the affect of top, or another way to cause the pac-container to appear above the input for any amount of results?
javascript html css google-maps autocomplete
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
add a comment |
I use in autocomplete of google-maps (without a map) on input.
I need that the list of results will open up and not down like the deafult. So I try to change the style of pac-container and I see that when I change the top or the margin-top the list is open up.
My problem is that I want to change the bottom and not the top, because each different amount of results needs a different top but the bottom can remain constant so it is more correct to change it.
I tried it on div that I created and it works great for any amount of results. Always the list (the div) appears above the input.
But the pac-container is problematic. Its top probably calculated independently and if I do not change it the bottom does not help.
I can calculate the desired top every time or delete it completely in any keydown [I tried and it works] but it just causes delay on the screen, and if I type really fast it is not always enough to get the change.
Is there a way to cancel the affect of top, or another way to cause the pac-container to appear above the input for any amount of results?
javascript html css google-maps autocomplete
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
can you show your relevant code please
– לבני מלכה
Nov 19 '18 at 7:54
@לבנימלכה, what matters to this question is the CSS I presented in the question. Let me know if need anything specific.
– Hodaya Shalom
Nov 19 '18 at 7:58
to help you we must see an example of you code(css,html) you can post in fiddle:jsfiddle.net
– לבני מלכה
Nov 19 '18 at 8:00
also see here:stackoverflow.com/questions/40143131/…
– לבני מלכה
Nov 19 '18 at 8:01
get us a fiddle :)
– louis12356
Nov 19 '18 at 8:12
add a comment |
I use in autocomplete of google-maps (without a map) on input.
I need that the list of results will open up and not down like the deafult. So I try to change the style of pac-container and I see that when I change the top or the margin-top the list is open up.
My problem is that I want to change the bottom and not the top, because each different amount of results needs a different top but the bottom can remain constant so it is more correct to change it.
I tried it on div that I created and it works great for any amount of results. Always the list (the div) appears above the input.
But the pac-container is problematic. Its top probably calculated independently and if I do not change it the bottom does not help.
I can calculate the desired top every time or delete it completely in any keydown [I tried and it works] but it just causes delay on the screen, and if I type really fast it is not always enough to get the change.
Is there a way to cancel the affect of top, or another way to cause the pac-container to appear above the input for any amount of results?
javascript html css google-maps autocomplete
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
I use in autocomplete of google-maps (without a map) on input.
I need that the list of results will open up and not down like the deafult. So I try to change the style of pac-container and I see that when I change the top or the margin-top the list is open up.
My problem is that I want to change the bottom and not the top, because each different amount of results needs a different top but the bottom can remain constant so it is more correct to change it.
I tried it on div that I created and it works great for any amount of results. Always the list (the div) appears above the input.
But the pac-container is problematic. Its top probably calculated independently and if I do not change it the bottom does not help.
I can calculate the desired top every time or delete it completely in any keydown [I tried and it works] but it just causes delay on the screen, and if I type really fast it is not always enough to get the change.
Is there a way to cancel the affect of top, or another way to cause the pac-container to appear above the input for any amount of results?
javascript html css google-maps autocomplete
javascript html css google-maps autocomplete
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
asked Nov 19 '18 at 7:50
Hodaya ShalomHodaya Shalom
1,90694593
1,90694593
can you show your relevant code please
– לבני מלכה
Nov 19 '18 at 7:54
@לבנימלכה, what matters to this question is the CSS I presented in the question. Let me know if need anything specific.
– Hodaya Shalom
Nov 19 '18 at 7:58
to help you we must see an example of you code(css,html) you can post in fiddle:jsfiddle.net
– לבני מלכה
Nov 19 '18 at 8:00
also see here:stackoverflow.com/questions/40143131/…
– לבני מלכה
Nov 19 '18 at 8:01
get us a fiddle :)
– louis12356
Nov 19 '18 at 8:12
add a comment |
can you show your relevant code please
– לבני מלכה
Nov 19 '18 at 7:54
@לבנימלכה, what matters to this question is the CSS I presented in the question. Let me know if need anything specific.
– Hodaya Shalom
Nov 19 '18 at 7:58
to help you we must see an example of you code(css,html) you can post in fiddle:jsfiddle.net
– לבני מלכה
Nov 19 '18 at 8:00
also see here:stackoverflow.com/questions/40143131/…
– לבני מלכה
Nov 19 '18 at 8:01
get us a fiddle :)
– louis12356
Nov 19 '18 at 8:12
can you show your relevant code please
– לבני מלכה
Nov 19 '18 at 7:54
can you show your relevant code please
– לבני מלכה
Nov 19 '18 at 7:54
@לבנימלכה, what matters to this question is the CSS I presented in the question. Let me know if need anything specific.
– Hodaya Shalom
Nov 19 '18 at 7:58
@לבנימלכה, what matters to this question is the CSS I presented in the question. Let me know if need anything specific.
– Hodaya Shalom
Nov 19 '18 at 7:58
to help you we must see an example of you code(css,html) you can post in fiddle:jsfiddle.net
– לבני מלכה
Nov 19 '18 at 8:00
to help you we must see an example of you code(css,html) you can post in fiddle:jsfiddle.net
– לבני מלכה
Nov 19 '18 at 8:00
also see here:stackoverflow.com/questions/40143131/…
– לבני מלכה
Nov 19 '18 at 8:01
also see here:stackoverflow.com/questions/40143131/…
– לבני מלכה
Nov 19 '18 at 8:01
get us a fiddle :)
– louis12356
Nov 19 '18 at 8:12
get us a fiddle :)
– louis12356
Nov 19 '18 at 8:12
add a comment |
1 Answer
1
active
oldest
votes
After several attempts over time I found the answer:
Change the top to : top: auto !important
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370363%2fgoogle-maps-autocomplete-style%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
After several attempts over time I found the answer:
Change the top to : top: auto !important
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
add a comment |
After several attempts over time I found the answer:
Change the top to : top: auto !important
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
add a comment |
After several attempts over time I found the answer:
Change the top to : top: auto !important
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
After several attempts over time I found the answer:
Change the top to : top: auto !important
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
answered Nov 19 '18 at 8:37
Hodaya ShalomHodaya Shalom
1,90694593
1,90694593
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370363%2fgoogle-maps-autocomplete-style%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you show your relevant code please
– לבני מלכה
Nov 19 '18 at 7:54
@לבנימלכה, what matters to this question is the CSS I presented in the question. Let me know if need anything specific.
– Hodaya Shalom
Nov 19 '18 at 7:58
to help you we must see an example of you code(css,html) you can post in fiddle:jsfiddle.net
– לבני מלכה
Nov 19 '18 at 8:00
also see here:stackoverflow.com/questions/40143131/…
– לבני מלכה
Nov 19 '18 at 8:01
get us a fiddle :)
– louis12356
Nov 19 '18 at 8:12