Given a website with a fixed header and fixed footer... if you try to input text with my Galaxy Samsung S3 the browser (Chrome) zoomes the input form an opens an onscreen-keyboard.
But the fixed header and footer is still there in the screen.. so there is almost no space anymore and the input form is overlapped by the fixed css elements.
Isn't the mobile browser supposed to "hide" all the other elements, also fixed elements, when it goes into text input mode?
Related
There is a page with header, body part and bottom fixed button. So, the problem is that when input is focused on mobile the viewport is changing. It pushes up the header and other components. Is there any technique like KeyboardAvoidingView in react-native?
I'm expecting that the screen shrinks and components like header, bottom fixed button will be visible when input is focused.
I have this webapp running which is pretty much a chat-widget that you can implement on your website. The DOM structure is as following
<html>
<head>
</head>
<body>
<iframe1 ../> // chat body
<iframe2 ../> // chat toggle
</body>
</html>
which looks like this on the mobile browser:
On the very bottom we have a textarea element. Once you tap on it the virtual keyboard of the mobile device gets opened and it looks as following:
Once you start typing and try to select the text itself you see that the cursor position is offset. This only happens on the iPhone 6 mobile Safari as far as I am aware. All other tested mobile devices / browsers seem to work fine.
I have found a related issue which is being described here : https://github.com/18F/web-design-standards/issues/277
I realized that if you hold your finger on the textarea field and try to scroll the page down (which sometimes works), then it appears as if the cursor position is stuck on its position whilst the rest ob the webpage scrolls.
When you manage to scroll the app further down so that the textarea is right where the current wide button with the x is located, then the cursor position seems to align with the text that you inputed.
The bottom container, containing the textarea is built as following:
<div class="container"> // position fixed to the bottom of iframe1
<div class="container2"> // position relative
// menu button positioned absolute
// textarea field positioned with margin to each side
// file icon positioned absolute
</div>
</div>
I have website that works well if opened in desktops and android device, but when I open in iOS devices such as Iphone and Ipad, the background did not fixed like on other devices, it will expand the background and create blank space on the right side of the page, and I used user-scalable=no to make user cant scrolling to the blank space, but still not works. Actually, I already use overflow-x: hidden; but my navbar didnt work like usual, the href didnt go to the target id. For example, news</li> it should go to the div id news, but it go randomly. So, what I should I use to prevent user to scroll in iOS?
this is the example of the blank space in iOS:
iOS safari has it's own set of issues. It generally tends to ignore all overflow: hidden you give on body and html. The only solution that i found till now was to either make you body exactly the size of your viewport and scroll the content within, or just make the position of the body fixed, in case your background is scrolling when you have a floating content on top that you want to scroll.
I have a web page I am designing which is almost finished. I have an icon to the right of the page which is used to display a menu when clicked, and it is right-aligned to the page. Currently, this icon and everything else on the right hand side of the web page is being covered by the vertical scroll bar. The current behaviour is that it appears only when the mouse curser is hovering over the browser window. I am wondering how it is possible to display the vertical scrollbar within a web page "always", when the page is scrollable (when the page height is greater than the height of the browser window).
For reasons of style, you can always show the vertical, native, web browser scrollbar using the following CSS property overflow-y : scroll; (see Mozilla documentation) to your body :
CSS
body
{
overflow-y : scroll;
}
JSFIddle
I have a page with a fixed div which is displayed at bottom of screen. When I put that page in iframe it has no issues while viewing in desktop
On desktop the yellow bar is coming at bottom without any issues:
https://jsfiddle.net/x1p4bf7j/12/
<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/" />
but on iPad it doesn't the text just doesn't fit inside iframe. Below is the text how it is displayed in iPad
As you can see in the image there is no sticky footer coming. I want that to be at the bottom of my iPad.
The issue is how mobile safari renders iframes. It doesn't respect a height attribute, preferring to set the height of your iframe based on the height of your content. Personally, it makes sense when you think about how earlier versions of IOS handled overflowed scrolling (two finger scrolling) - Imagine an iframe that ALSO contained a scrollable element!
(A related stackoverflow here: iframe size with CSS on iOS)
Anyway, your "fixed" footer IS fixed - just at the bottom of a very large iframe.