I'm trying to position an element directly above a mobile keyboard. ie: position absolute/fixed to bottom of page, but pushed up by the keyboard (or pushed up equivalent height of the keyboard).
Usually this is the opposite behavior of what's desired, and there's to be a lot of people fighting to keep bottom elements in place. I feel like I remember fighting those same battle before...
But now that I want it to move, it's not. (of course!)
My focus is iOS Safari for now, but would prefer cross browser.
It seems older versions of iOS changed window.innerHeight when the keyboard opened, for better or worse. But that's no longer the case. Which may explain why I'm not seeing what I expected to see...
I've been playing around with variously positioned parent elements with no luck.
Is this even possible? Or is the keyboard now completely detached from the viewport?
It is not possible. The keyboard appears to be its own entity away, or as you said, detached from the viewport.
Although you can't fix the element to the keyboard exactly, might I suggest that you may be able to use JavaScript and add a class that raises the fixed element the same height as the keyboard.
The keyboard sizes can be found here:
What is the height of iPhone's onscreen keyboard?
It's possible with VisualViewport API now to listen for the viewport change and read it values. In practice, it's not sending events immediately so the experience might be laggy.
Related
I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.
See these pictures for reference:
The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?
The screenshots were taken in Firefox - this is a website based on HTML, not a native app.
I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?
I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?
On your manifest.xml you can set android:windowSoftInputMode to adjustPan.
<activity
android:name=".WebActivity"
android:windowSoftInputMode="adjustPan" />
From Android documentation:
Don't resize the window to make room for the soft input area; instead
pan the contents of the window as focus moves inside of it so that the
user can see what they are typing. This is generally less desireable
than panning because the user may need to close the input area to get
at and interact with parts of the window
I'm having a website with fixed top 'navbar', along with few input fields and labels "for" them.
Clicking on labels, creates focus on corresponding inputs with no any side-effects to the rest of the page. (I've tested it out on all modern desktop browsers and android's native browser and also chrome).
All is fine except on iOS (iPad, iPhone), where clicking on same label makes:
input to focus (which is expected) and sliding in soft-keyboard (which is expected).
Now, when I click on label of another input, default scrolling takes place and newly focused input is adjusting its position to stay within visible part of viewport - this is also fine and highly expected behaviour, but at the same time, this causes weird effects to 'navbar' which is fixed to the top. Navbar clashes all over the viewport without any sense.
I need to add that the same behaviour is not happening when I click on input itself - only when I click on corresponding label.
Has anyone experienced this before? Looks like a bug on iOS, but I'm really wandering - what is the real difference between clicking on label, and clicking on corresponding input and why implementation of this behaviour differs ONLY on iOS.
I have temporary workaround to this, by detecting iPod,iPhone,iPad userAgent and removing "for" attribute from labels on these agents (I want to retain 'clickability' of labels where possible), but it doesn't seems to be right for me.
Any thoughts on this?
U can replace the css position attribute of navbar from "fixed" to "absolute", and switch the unit of width & height from "%" or "px" to "vh" or "vw" then it would goes well on ios.
My content wrapper will be centered in the body. the problem i have is that i have a certain div that will be partially reaching into the body and out of the wrapper using z-index. this works fine when using a certain solution. if an user is maximizing its desktop solution the frame of the content wrapper wont be visible anymore. even then the certain div is no more visible. so is there a way to limit the max. zoom?
here is an example: link
when you will zoom in you can see that the red div is from a certain point no more visible. this i would like to avoid if possible. thanks a lot.
Various browsers allow you to define viewport metatags that define the allowable zoom limits (for example Web Kit-based browsers). If you know what your target browsers are, you may want to investigate this.
does anybody know how to stop track pads from scrolling horizontally?
My website has a deliberate overflow which you navigate using some javascript scrollbars.
http://www.mitchellop.com
However, if viewed on a mac using firefox the twofinger touch pad scroll allows you to move horizontally even though the x-overflow is hidden.
Any ideas?
thanks.
I ran into this issue myself with a project I'm working on. Firefox has some pretty strange events when it comes to certain kinds of scrolling. A little digging turned up the MozMousePixelScroll event. Here's the code I used to squelch the horizontal two-finger scrolling:
window.addEventListener('MozMousePixelScroll', function(evt){
if(evt.axis === evt.HORIZONTAL_AXIS){
evt.preventDefault();
}
}, false);
Instead, you could move the inside content by either positioning relatively, and changing the left value, or using CSS transforms (which don't require a repaint, and are hence quicker).
This may or may not require lots of rewriting, but it will work.
I use a screenshot tool like SnagIt and this tool is able to make a screenshot of a specific element inside a website. I tried this feature with firefox, safari and ie, all runs fine. When I use the mouse pointer to aim an element, SnagIt shows a red box around the hovered element in the browser. For example, this tool knows the exact coordinates of a div or img element.
What is the technique behind this feature? Is there a common way for every browser? I've already used Spy++ to get the window handles, unfortunately this isn't the resolution.
I'm in a project in which I need this feature for different browsers.
Thank you very much,
Mark
If you want to know the x,y coordinates of any element in javascript, Then I suggest you use jquery [http://jquery.com] on your page and use its offset function.