Geek Answers Handbook

Placeholder attribute when entering text with iOS 6 from landscape to portrait

I have a problem after upgrading to iOS 6, which turns me on.

It looks like at any time I have the "placeholder" attribute in the input field, and when I turn from "Portrait to landscape" and "Back to portrait", the page shifts some pixels on the left side, causing a horizontal bar.

After much research, I came to the conclusion that this should be related to the meta-view screen, because every time I use content = "width = device-width" everything works fine.

PS Yes, I really need to have a percentage input width in order to have a fluid design :)

Here is an example of recreating a problem. Thanks...

<html> <head> <title>test</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/> </head> <body> <div style="width:100%;background-color:red"> <input id="testInput" placeholder="test" style="width:90%;" /> </div> </body> </html>
+7
source share
4 answers

I found this problem. and fix it.

(URL: http://mooki83.tistory.com/2656550 (Korean))

testURL: http://mooki83.da.to/m/testios6.html

javascript:

 /* Optimized PLACEHOLDER for iOS6 - Mooki ( http://mooki83.tistory.com ) */ $(document).ready(function(){ $(window).bind("orientationchange.fm_optimizeInput", fm_optimizeInput); }); function fm_optimizeInput(){ $("input[placeholder],textarea[placeholder]").each(function(){ var tmpText = $(this).attr("placeholder"); if ( tmpText != "" ) { $(this).attr("placeholder", "").attr("placeholder", tmpText); } }) }
+4
source

The use of "overflow: hidden;" on the containing element solved this problem for me.

+5
source

CSS fix:

 body>div { overflow-y: auto; }
+3
source

The answer is not js

Add overflow:hidden to the parent element and it will work like a charm

0
source

More articles:


All Articles