I have a form inside an Angular Material Dialog component. My problem is that when an input field gets focus, the keyboard opening in mobile devices covers the input field the user wants to write into.
When the keyboard opens the main body of the HTML gets az appropriate margin-bottom, however, this does not apply to the dialog's wrapper (cdk-overlay-container), since it's position is fixed.
My ideas:
1, Changing from fixed to absolute could solve my problem, however since my main container is a huge scroll-container, that would only work if I scroll to the top programmatically, which I don't really like.
2, If I could detect that a keyboard was opened, I could add a class to a parent container, however, I'm not sure how to do this without attaching an event to every input field we have, which feels ugly and unnecessarily heavy (since I'd have to send events to notify other components). I would also need to know the size of the keyboard, which I'm not sure is possible.
The issue occurs on both Android and iOS.
Today I've learnt something new, that <select> element rendered completely different on a desktop and mobile browser. The problem that I haven't use it before and almost all stuff I've done, is by using Bootstrap's elements.
So my question is actually 2 questions are following:
Why <select> tag rendered differently on mobile chrome and desktop chrome when I debugging in mobile mode? Is it intended behaviour or I can consider it as bug? For example open following page http://www.w3schools.com/tags/tag_select.asp from desktop browser in dev mobile mode and on a hardware device, you will see the difference.
What is the best approach to achieve consistency across various devices? Can I be sure that in all new mobile devices <select> will be rendered "in a mobile way", or just implement my own select element based on Bootstrap modal combined with List group as I've done here: http://codepen.io/anatoly314/pen/EPBmrM?editors=1010 ?
DevTools Device Mode does not emulate mobile-specific UA handling of form elements. This is actually very tricky to do since those things are compiled for that platform build.
The best thing to do is know there will be a difference. In the case of select elements it really doesn't matter much. Since the mobile UX is a full screen scroll selector of the choices.
The absolute best thing, as always, is use Device Mode as a guideline. It is not absolute nor can it be. You will always need to do on-device testing to verify everything works as expected. DM simply gets you 85-90% of the way there without issue.
Is there any way to make a modal automatically scroll when a form field inside it is focused in order to center it? I think it would be useful when dealing with form in mobile devices with virtual keyboards
UPDATE
Try this bootply http://www.bootply.com/2tPE0xj7GX# with your smartphone and fill the form fields. You will notice the keyboard overlaps the fields
As I said. On every sane mobile OS the focussed input should get perfectly centered in the remaining screen portion. It at least does so on iOS.
I'm just starting out in web design/CSS so my current knowledge is limited.
With that in mind (this may be very easy for pros to fix), does anyone know why the Facebook iframe on this website won't stay within the sidebar on mobile devices?
http://www.northeastimage.co.uk
It looks great on desktop browsers but on the iPhone for example sits out of the sidebar over the margin sticking to the far right of the screen.
i would go for a user-agent to look trough your css and html, its a cross browser look also support phones and tablets it lets you "tell" the browser that your a phone tough your on your desktop
easy to debug while using it, i pref user agent for chrome get it here
Get strings to view from more viewports than the standard amount that are embedded in the program
Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn't work on mobile browsers.
The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e. g., a pen device).
—W3C: CSS 2.1: Selectors, dynamic pseudo-classes
So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.
Sigh. It seems like no-one answering this question actually tried it on a real device. In many cases it does work. The first click acts as a hover.
Some more info here: http://designshack.net/articles/css/are-hover-events-extinct/
What does the questioner mean by "Does css hover work on mobile devices?"?
He obviously doesn't mean it literally, because there is no such thing as hover on mobile devices so it cannot work.
If he means "On mobile devices if I tap on an object with a hover style does anything happen?" the answer is Yes, but what happens varies with the device/browser.
Specifically on iPhone/Safari and Android the response is as if you have written an OnClick() event handler with the style change in it, and this persists until you tap on another object. On Windows phone the style change occurs while your finger is pressed down on the phone and then reverts when you release it.
You can check your device at the test site I set up at davidleader.net/mobiledemo.html.
Not unless the device can detect when someone is hovering their finger over the screen, about to tap. :)
It depends upon the browser used in the mobile device. Refer to Quirks Mode for mobile devices and see if your browser / platform will implement it.
From my own experience, it works fine on my iphone4, whatever is the browser (safari or chrome), but does not works properly on my nexus10 with chrome...
I used :hover to implement menu. When I say "it works", I mean that the first touch behaves like an hover on a desktop, and a second touch will behaves like a click.
When I say "it does not work", I mean that a touch behaves like a click directly...
I would say no, as you do not hover in a mobile interface. You can just press, if on touch screen. Otherwise you just move through links.
won't do its magic on touchscreen devices, but it does work on mobiles where the user navigates by using some arrow keys (or on amazon kindle)
also works for blackberry storm 1 devices as they have touch, and click events due to their suedo-tactile screens.
Yes, it has. if you don't believe, try it.
i) Write Hover Css on Codepen or other stack which you had Account.
ii) Save your work. [it easy to see if you add 'border-bottom: 1px dotted black']
iii) Open it on your Mobile, Tablet or whatever you want to prove. [which your pen save, mind is CodePen]
As result, you'll get the answer. Don't believe the theory much, just practice and prove it.
:hover works with the android default browser, but it is really tricky (for the user) to trigger the hover without triggering a click at the same time.