I've spent a day trying to solve a problem. When a user zooms in on a page, the google places autocomplete .pac-container is no longer displayed under the corresponding input field. I have spent a day testing and the thing I found was this from Google: https://code.google.com/p/gmaps-api-issues/issues/detail?id=3416.
Let me explain in more detail. When I load a page with an initial scale of 1 on the viewport, and click on the search input field, the autocomplete suggestion box drops down exactly where it should. However, when I zoom in or out on that page on a mobile device, the .pac-container loses its position:
As you can see, the container is now gapped below the input field. I have tried a bunch of stuff, such as clearing the style of the .pac-container when the input field has focus. Nothing works. Does anyone have a solution?
I have just managed to fix this issue in my use case by simply adding 'height: auto' to the body css. Fixed the problem and now the .pac-container positions exactly where the input is required.
Related
I have an iframe wrapped with a iframe-container div which is taking 25% of the screen from right, all the elements are inside the iframe.
There is a textbox input field in iframe, upon touch, all elements are behaving properly and the windows adjusts as per the keyboard of IPAD however the moment I start typing, i.e any character is being added in the text input the whole layout of iframe-container shifts towards left and then after few more character inputs disappears completely.
Refer to the image below:
Screen one (this is the desired UI all the time)
Screen Two (Messed up UI after any character is entered)
Even this layout disappears when more characters are added.
I went through few solved issues of iframe with IOS devices and followed few concepts and solutions from there.
Iframe in this case does not have any scroll added to it. A div inside the iframe is being scrolled
Have also tried adding -webkit-overflow-scrolling: touch; to the scrollable div and this did not helped either.
Was using VH for height, tried removing them and used PX no luck there too.
NOTE: A lot of jQuery is being used of UI adjustments, not particularly for iframe and the cross button basically toggles the iframe-wrapper div (simple hide and show).
Thanks!!
EDIT
I have found the problem, now I need the solution for this.
Safari is automatically adding background-position property and setting it to Initial, manually override to no-repeat fixes the problem.
I tried adding jQuery css property for background-position but I guess it is somehow not being applied.
This is weird but I discovered 0 property was not working and the moment I added left and top instead of bottom: 0 everything was fine!!
I have problem with my html/css code on iphone.
Visit this link http://my-services-demo.botic-denis.com/
and click on search icon in top bar.
After that You will see search bar.
Problem is starting when I click on search input box.
After that it seems like some element make body wider and I can scroll from left to right. Which shouldn't happen.
I can not find the issue causing this.
I have validate html and css.
Also I have another form on the bottom of the page. It is contact form and input fields are not making any problems on focus.
There is apparently a zoom issue on iOS when you click an input box the browser zooms in on that box, only way to fix is have the font size of the input box 16px or greater.
font-size: 16px;
Hope this helps.
Whenever I give focus to an input field which is within a container that is fixed (in this case, a toolbar), an ipad will remove the fixed position. Now I can scroll above and below that toolbar, which is undesirable.
https://www.hypotheker.nl/#/afspraak-maken
I have tried many things like setting the body to a fixed position, but that will scroll the page to the top.
Does anybody have the golden solution to fix this issue?
Here's the solution to your problem: https://stackoverflow.com/a/20205857/3523645
Basically, it's a known bug in touch-device browsers and the solution is to detect focus event on target input fields and at that moment change the styling of fixed elements to position: absolute.
The mentioned solution uses modernizr's touch property, but keep in mind the following (taken from modernizr's documentation):
The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device.
I'm using Harvest's "chosen" plugin, and it's working fine until the browser window increases too far in width-- then for some reason it calculates that left should be -9000 and renders off screen.
Furthermore, I can no longer get it to close by clicking outside of the dropdown area.
Screenshot below-- what can be seen of the dropdown is circled in red. Has anyone else run into this problem?
I just realized what's going on.
When you're outside of the input/dropdown, the dropdown is still rendered, but given a left of -9000px.
My browser width is currently about 9400 px.
Still don't actually know why it's not closing, though.
EDIT: edited the src to use show/hide instead of left and it works now....
My page, it keeps on getting different menu width when i zoom in and out. It is fine in IE, and no one else. I did not spot any fixed positioning, this seems to be using relative position.
have tried playing and disabling all CSS property to my menu bar through google chrome inspect element.
turn this from none to auto: " -webkit-text-size-adjust: auto "
Tried to use em ex px for my font-szie and padding. I am juiced out of ideas, save me internet!!!
www.magentek.com
Try zooming out, you will find press room gets pushed down. I got this SimplyBiz theme from wpcrunchy. It seems even the paid version have this problem too. The CSS and html is way too large to post, too much bloated codes, i think is sufficient to just use chrome inspect element.
I took a look at the site, and my opinion is that the css and js that make up the menu functionality are creating a 6th menu element. That would explain why an extra little tab is hanging off the end there. Since it doesn't have any content, the browsers are all handling the whitespace a little differently.
Did you by any chance modify the menu to take it from 6 elements to 5?