I have a view in appcelerator, here is the styling in the TSS file:
"#addTelephoneNumber" : {
bottom: "10dp",
height: "60dp",
width: "100%",
backgroundColor: "#FBB450",
borderRadius: 10
}
I want it to be at the bottom of the screen, however when the keyboard shows, the view moves up. See screenshots below:
Can the keyboard be ignored and overlap the 'Add number' button? I have tried using top and setting it to 90% however same problem. Setting fixed values in dp fixes the issue, however it does not scale correctly on different mobile devices.
There's two properties to configure this behaviour:
Ti.UI.Window.windowSoftInputMode to determine when the soft keyboard shows as well as how the content adjusts to make room.
Ti.UI.View.softKeyboardOnFocus to override the when per (input) view.
Related
I have searched a lot and havent found any solution that works so here it is.
I have created a button that is after the content and have applied css for it to become sticky at the bottom of the page...
<button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button>
button.ocs-toggle-posts-toc-mobile {
display: block;
bottom: 10px;
position: sticky;
position: -webkit-sticky;
margin: auto;
border-radius: 4px;
box-shadow: 0 0 3px 0 #d5d5d5;
background: #232f3e;
font-weight: 500;
font-size: 18px;
padding: 7px 12px;
}
It works everywhere in any browser i tested except mozilla android.
If mozilla bottom adressbar is visible the button works okay.
https://imgur.com/a/EJosALR
BUT if mozilla’s bottom address bar is hidden, the button isnt clickable.
https://imgur.com/a/A2jwzIl
When the mozilla’s bottom address bar is hidden i think the viewport height changes, and maybe because the button is now where the visible adressbar was maybe it out of the "active" viewport of mozilla... that's definetely a bug i believe cause it doesnt happen in other browsers!
Nevertheless can you take a look and see if i have anything i have missed?
I would really appreciate it cause i have looked almost everywhere i believe...
test url: https://thefinterest.kinsta.cloud/p/asjalska/
Investigations using Firefox remote debugging
TL;DR: With high probability a bug in the Firefox mobile app
So I've linked up my phone to the computer and started a remote debugging session on the page you provided.
When inspecting the button element <button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button> we can see the exact box position highlighted in the viewport: screenshot
And now it gets interesting. Apparently, the DOM box of the element gets shifted as soon as the bottom bar disappears. Or rather: The initial viewport (when the bottom bar is visible) doesn't change, because the box is still located at the same position.
So you can in fact still click/touch the button but in an area above it.
You can see this behavior in the screen recording below:
Cookie banner is repositioned as expected
Interestingly, the behavior of the cookie banner (hidden in the screen recording because already confirmed) looks as expected though. So what's the difference to the button?
Workaround and working solution: move the button above the #ocs-site element
Apparently, after quite a lot of experiments, I realized the only difference between the button (incorrect behavior) and cookie banner (correct behavior) is the fact, that the cookie banner is in a rather top level of the DOM, whereas the button is nested quite deep in the tree.
Finally, I could find a working solution that makes the button behave as expected. Here you can see the correct scrolling behavior:
The solution I've come up with is to move the .ocs-trigger button above the #ocs-site div element. This fixes the incorrect scrolling behavior when the bottom bar disappears/appears.
Also, apply some styles on the .ocs-trigger element for the correct positioning.
position: fixed;
bottom: 10px;
z-index: 11;
left: 0;
right: 0;
Here you see the final DOM in a screenshot:
Please note, that you probably have to apply additional styling changes. This solution's major aspect was to get rid of the incorrect scrolling behavior.
Follow-up: Firefox Bug? Seems to me.
As it still appears to me at this moment, I would say this is a bug in the mobile Firefox implementation. My guess is, that the viewport calculations are somehow incorrect for nested elements.
In order to get some attention on this topic, I would recommend you to share these investigations and documentation with the Mozilla team at https://github.com/mozilla-mobile/fenix/issues. Let me know if I can help you with this.
I have created an angular app where the sidebar is height: 100%. However when viewing the webapp in Chrome for Android, when scrolling the document:
The chrome address bar slides up gently
The 100% real size remains the same until you TouchEnd
The darkgrey sidebar is height: calc(100% - 55px) so the top bar should normally always remain visible, and always fill the remaining space between the top bar and the very bottom.
I've already tried several things to get this fixed. The footer has bottom: 0 and this one is in fact always rendered correctly. So this made me try to use top: 55px; bottom: 0 instead of height: calc(100% - 55px). But from the moment you're setting both top and bottom, the result is the same as setting the height.
Does anybody know a way to make the viewport adjust its height while the address bar is appearing/disappearing?
I was able to solve this issue by
Creating a css variable (variables.scss)
:root {
--viewport-height: 100%;
}
Instead of using 100% use var(--viewport-height)
height: calc(100% - 55px);
becomes
height: calc(var(--viewport-height) - 55px);
Then binding to the visualViewport.resize event (MUST use addEventListener here)
if (!serverSide) {
visualViewport.addEventListener('resize', () => {
document.documentElement.style.setProperty('--viewport-height', `${visualViewport.height}px`);
});
}
Make sure there is no transition set for the height property.
CSS variables are supported by all major browsers.
VisualViewport docs
Linked-from-docs Demo with source code
Commit reference
I am working on a react native project made using react native cli. The problem is that the TextInput gets highlighted when the keyboard is visible/active & it squeezes the view and mess up the layout which reminded me of KeyboardAvoidingView behaviour. Even though I don't use KeyboardAvoidingView in this project because all text inputs are in the upper half of the screen so they won't get covered by the keyboard.
<TextInput
style={styles.inputText}
multiline={false}
onSubmitEditing={() => Keyboard.dismiss()}
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
onChangeText={numberInputHandler}
value={enteredValue}/>
inputText: {
borderBottomColor: "white",
borderBottomWidth: 2,
width: "30%",
position: "absolute",
bottom: Dimensions.get("window").height / 5,
left: Dimensions.get("window").width / 5,
color: "white",
fontSize: Dimensions.get("window").height * 0.03,
fontFamily: "Lato-Regular"
}
React Native Ver 0.61.5
Testing was done on an Android emulator and an Android physical device
As I can see you are using absolute positioning where bottom uses Dimension api to get the height. The problem occurs due to this. Try giving static height rather then fetching from Dimension because when keyboard appears visible window gets shrink causing react to re-render because height changes.
position: "absolute",
bottom: Dimensions.get("window").height / 5,
Solution provided by Nikosssgr:
In AndroidManifest.xml
android:windowSoftInputMode="adjustResize" changed it to "adjustNothing"
I am trying to place a text input at the bottom of the viewport/screen. It works fine, it even "sticks" to the top of the keyboard after the onfocus event.
When the keyboard is closed, however, there is lag between the changed position (top of keyboard) and the original position (bottom of viewport).
My css for the element is :
.fixed {
position: absolute;
z-index: 1000;
height: 50px;
display: block;
bottom: 0px;
width: 100%;
}
EDIT:
This behavior doesn't depend on fixed/absolute positioning only. Also inputs with position:relative or position:static have the same issue. It seems like the softkeyboard disappears much faster than the screen/browser view can update itself. Seems like a memory issue or a deep bug within Android's default browser (kill me now).
Here are some screenshots.
On focus :
http://i.cubeupload.com/AQS7h8.png
On blur (note the blue screen ± is that a mem issue?):
http://i.cubeupload.com/nV3kMh.png
Had the similar case with android keyboard ruining layout, the following code should work for you.
We are getting current position from top, setting the top style value, and resetting bottom value.
var fixed = document.querySelector(".fixed"),
distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';
Can you make the overflow content of a div scrollable in the Android browser?
It is scrollable in all other modern browsers.
In iOS it is scrollable - however it does not show scrollbars - but it is scrollable via dragging.
A simple example:
http://jsfiddle.net/KPuW5/1/embedded/result/
Will this be fixed soon?
Android 3.0 and higher have support for overflow:scroll, on < 3.0 it's another story. You might have some success with polyfills like iScroll, however that does come at a cost. It's difficult to implement on sites with complex layouts, and you need to a call a method everytime the content on your site changes. Memory use is also an issue: on already underpowered devices performance may lag because of these kinds of polyfills.
I would recommend a different approach: use Modernizr to detect support for overflow scrolling , add a class to your html tag and use that to rewrite your CSS so that pages scroll 'normally' instead of in a box.
/* For browsers that support overflow scrolling */
#div {
height: 400px;
overflow: auto;
}
/* And for browsers that don't */
html.no-overflowscrolling #div {
height: auto;
}
overflow: scroll; is supported as of Android 3 (API 11).
For a cross-platform (namely iOS <=4.3.2) Cubiq iScroll is an easy-to-implement fix.
You could try touchscoll.js for scrollable div elements
Just for completeness:
The scrollbars are actually there in Android 2.3, but they are very buggy and by default they are styled to have 0 width, so they are invisible.
You can make them visible by adding styling like:
::-webkit-scrollbar {
width: 30px;
}
::-webkit-scrollbar-track {
background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
background-color: $lightgrey;
}
However, the thumb element is not draggable, you can only move it by tapping the track underneath or above it.
Also, these styles will change the look of your scrollbars in all webkit browsers, so best you should add a class that only applies to Android 2.3.
You can make a DIV scrollable in Android by defining the styles of the scrollbar in your CSS.
This article show you how to do it:
http://css-tricks.com/custom-scrollbars-in-webkit/