vh / % units and keyboard on mobile devices
The issue is quite straightfoward, we've all experienced it before.
Luckily I rarely work on websites that have elements that need to fit perfectly based on the viewport sizes, however when I do, I prefer to use a jQuery solution to achieve this.
I am going to go out on a limb and assume that you only need to apply this type of rule on mobile, so am going to add this to the code.
jQuery(document).ready(function($){ //wait for the DOM to load
if($(window).width() > 640) { //check if screen width is less than 640px (i.e. mobile)
$('#my-element').css({ 'height' : $(window).height() });
}
});
It is possible to edit the height directly by changing the action to:
$('#my-element').height($(window).height());
but we specifically want to overwrite your CSS rule that stated something along the lines of:
#my-element { height: 100vh; }
I've edited your codepen to include my example.
How to set fixed base to calculate vh unit in css on mobile?
Finally I used jQuery to fix vh units, as it was mentioned in source 2 and there.
CSS: Are view height (vh) and view width (vw) units widely supported?
Phonegap - iOS Keyboard and Dropdown 'compress' webview because of vh unit
The parent container(s) that holds the input element cannot contain height:100% or 100vh on iOS if thats what you are trying to do. I had this similar issue on iOS timepicker reducing the screen size and showing blank just like yours.
This usually happens if the keyboard height is half compared to the screen height of iOS device. On larger screens like iPhone 6, this issue doesn't happen.
I used min-height:480px
and height:100vh
on the same container that gets resized. It fixed my issue on the smaller devices.
This cordova.plugins.Keyboard.disableScroll(true);
is not required.
Let me know if this works for you.
CSS3 100vh not constant in mobile browser
Unfortunately this is intentional…
This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:
This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.
Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.
From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.
Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
No fix planned
At this point, there is not much you can do except refrain from using viewport height on mobile devices. Chrome changed to this as well in 2016:
- https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
- https://developers.google.com/web/updates/2016/12/url-bar-resizing
How to implement endless list with RecyclerView?
Thanks to @Kushal and this is how I implemented it
private boolean loading = true;
int pastVisiblesItems, visibleItemCount, totalItemCount;
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
if (dy > 0) { //check for scroll down
visibleItemCount = mLayoutManager.getChildCount();
totalItemCount = mLayoutManager.getItemCount();
pastVisiblesItems = mLayoutManager.findFirstVisibleItemPosition();
if (loading) {
if ((visibleItemCount + pastVisiblesItems) >= totalItemCount) {
loading = false;
Log.v("...", "Last Item Wow !");
// Do pagination.. i.e. fetch new data
loading = true;
}
}
}
}
});
Don't forget to add
LinearLayoutManager mLayoutManager;
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
Related Topics
When Printing Page Table Rows/Cells Gets Split on Page Break
Cannot Find Definitions of Editor-Label and Editor-Field in MVC 4, Did Ms Remove It? Why
Sprites Less CSS Variable Increment Issue
Plain <Select> Element Vs Bootstrap's Dropdown Element Rendered on Mobile Device
Bullet Point Background Color Attribute? CSS
No Possibility to Select Text Inside <Input> When Parent Is Draggable
Fullwidth and Multiple Columns Using Flexbox
Vertically Center a Div with Variable Height Within a Div That Is 100% of The Viewport
What Is Position:Relative Useful For
What Is CSS "[Class*=My-Class] .My-Subclass" Doing
CSS Media Queries Not Working in Safari
CSS Table Display Differences - Chrome Vs Firefox
Flutter - Implementing CSS Radial Gradients
Is There Any Sharp Style in CSS
Complex Selector Don't Work in Last Blink Version: Nth-Child(2):Nth-Last-Child(2){}
CSS Change Icon Color When Input Is Focused
Why Does a Rect Require Width and Height Attribute in Firefox