We Keep Coding

Changing position of Google Places Autocomplete result box

On a page I'm working on, the results of the Google Places Autocomplete is showing up 70px below where it should, leaving a gap between the search box and the beginning of the results container.
The height of the gap happens to be the exact height of Chrome's autofill feature, so I'm suspicious that the Autocomplete library is for some reason taking that height into account when calculating the position, even though I've managed to disable that feature on my search box.
I'm able to fix the problem by overriding the value of the top attribute of the .pac-container class (replacing the value of 1234px which the API has calculated with 1164px), but I would rather have a way to do this dynamically or just based on an offset than have to hard-code that number.
Is there a way, with CSS or JavaScript/jQuery, to move the Autocomplete results container up by a certain amount?
A list of the CSS classes involved in the Autocomplete box can be found in Google's documentation.

I have tried many approaches and the best thing so far that worked for me is the good old (negative) margin.
I wanted the resulting menu to be shown on top and I did this:
<style type="text/css">
.pac-container{
margin-top: -210px;
}
</style>

Yes, you can style the Autocomplete
https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
However, lets look at WHY the "gap" is happening.
Double check your HTML and BODY tags, see if they have margin/padding added to them
So, the way Autocomplete detects it's position is by calculating the X/Y from the top/left of the BODY tag. I had this same problem (autocomplete had a big gap between the result box and the field), I discovered that my CMS system was adding a 30px margin to the BODY tag for the admin bar, this pushed the Autocomplete box down by 30 pixals... (the real problem)
html, body{margin:0 0 0 0;}
and the autocomplete vertical position was proper and the gap was gone without any odd JS scripting...

The below snippet worked for me.
In this initially, it will remove the previous pac-container div anywhere in the DOM. Later on, It tries to find the pac-container div element inside autocomplete object and it will place pac-container the div element inside another div in this case it is "book-billing-address"
$(".pac-container").remove();
autocomplete = new google.maps.places.Autocomplete(input);
if(id_val == 'payment-address'){
setTimeout(function(){
if(autocomplete.gm_accessors_ != undefined){
var container_val = autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H
autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H.remove();
$('#book-billing-address').append(container_val);
}
}, 100);
}
and applied the following CSS, when div element moved inside book-billing-address div.
#book-billing-address .pac-container{
position: absolute !important;
left: 0px !important;
top: 36px !important;
}

please check parent element of searchbox, if parent element has margin-top, then convert it into padding-top
example code
`
.parent_element {
/* margin-top: 70px; */
padding-top: 70px;
}
</style>
<div class="parent_element">
<input type="text" class="autocomplete">
</div>`
I hope will work for you :)

It's perfectly work for me , no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg

Add css on body tag with position: relative
It worked.

jquery-ui datepicker change z-index

The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.
I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.
see the ugly circle covering july 6th below...
the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.
I've already tried
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
and
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
but it seems the z-index get overwritten each time the datepicker is launched.
any help is appreciated!

Your JS code in the question doesn't work because jQuery resets the style attribute of the datepicker widget every time you call it.
An easy way to override its style's z-index is with a !important CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative; and z-index on the input element itself which will be automatically copied over to the Datepicker widget.
But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
$('.date_field').datepicker({
//comment the beforeShow handler if you want to see the ugly overlay
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
Fiddle
​I created a deferred function object to set the z-index of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.
The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).

There is a more elegant way to do it. Add this CSS:
.date_field {position: relative; z-index:100;}
jQuery will set the calendar's z-index to 101 (one more than the corresponding element). The position field must be absolute, relative or fixed. jQuery searches for the first element's parent, which is absolute/relative/fixed, and takes its' z-index

You need to use !important clause to force the in-line z-index value using CSS.
.ui-datepicker{z-index: 99 !important};

This worked for me when I was trying to use datepicker in conjunction with a bootstrap modal:
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});
Of course, change the selector to fit your own need. I set the "z-index" to 1051 because the z-index for the bootstrap modal was set to 1050.

The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post
To get a z-index of 100. You need an input with z-index:99; and JQueryUI will update the datepicker to be z-index:100
<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; }
You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.
<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; }

In my case nothing worked.
I needed to add the z-index to the input type that has the datepicker.
<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

The BEST NATURAL way is to simply put the date-picker element on a "platform" that has a "relative" position and has a higher "z-index" than the element that is showing up above your control...

This is for Bootstrap datetimepicker
If your datepicker is hiding because of scroll appears in your div use:
overflow-x: visible !important;
overflow-y: visible !important;
in css of whole div that contain your datepicker and other item such as
.dialogModel{
overflow-x: visible !important;
overflow-y: visible !important;
}

Add this:
$(document).ready(function()
{
$('#datepickers-container').css('z-index', 999999999);
};

How to set the focus on a hidden textbox field using JavaScript?

How can I set the focus on a hidden textbox element?
I tried this:
document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus();
But, this does not work here. As alert(document.activeElement.id); returns null in this case.
If I make this field visible, the above script works fine. Any ideas where I am getting it wrong?

If you really need to do this, make the box transparent, not hidden:
opacity:0;
filter:alpha(opacity=0);
Alternatively, if you want to ensure that the user doesn't accidentally click it, just place the input inside a div with
width: 0;
overflow: hidden;
However, there is most certainly a better way to do what you want, maybe using keydown/keypress events.

I don't think this is allowed, at least in IE. I got this information from jQuery's focus page.

You can add some js if you need a workaround and cannot change the opacity attr.
/* bind a click handler to your trigger */
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) {
/* in case your field is fading, cheat a little (check css transition duration) */
setTimeout ( function timeoutFunction () {
/* show the cursor */
jQuery('#your-search-input').focus();
}, 100);
});

Using Apsillers answer, my setup for this same situation involved:
a parent div with position:relative;
a child form element position:absolute; z-index:0; opacity:0; filter:alpha(opacity=0);
a second child element position:absolute; z-index: (value > 0) (positioned to cover the transparent input).
Aspillers' answer is the correct one given the question asked, but I wanted to give a practical example of when this is necessary.
Specifically, form elements can be hidden if you're using any kind of script/plugin that makes "fancy" inputs (i.e. radio/check elements, select elements). But if your script or plugin is written poorly, it can eliminate keyboard accessibility. Preserving the flow of a form by allowing all elements to have focus can save a lot of headaches for website users.

Ajax auto-complete, with bespoke popup location

I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}

It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}

Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance

How can I define an accesskey for an invisible HTML element

I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.

The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.

You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.

Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.

Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7