I'm facing 2 problems with Angular Material Autocomplete component positioned on the bottom of the browser screen.
The input field is covered by the keyboard, I found this solution that works but I don't know if it's the correct one for this type of issue
document.getElementById("searchInput").onfocus = () => {
window.scrollTo(0, window.outerHeight);
document.body.scrollTop = window.outerHeight;
}
The autocomplete options go under the keyboard so the user cannot make a selection.
I tried with Windows 10 + Chrome 73, also with my Android smartphone Xiaomi Mi A1 + Chrome 74 and all works fine, but with IPhone 7 + Chrome 74 I got troubles.
Here you can find the code that I'm using: Stackblitz - Material autocomplete
Related
I experience a weird ios keyboard issue on our pwa web page.
As the photo below, the keyboard body disppear while the toolbar remains. And once this situation appear, it will keep like that until I restart the pwa app.
We use react and the input element is a Material-ui Textfield. While there have some conditional render on parent component
function handleChange(e) {
var value = e.target.value;
setValue(value);
return 0
};
<MaterialUi_TextField
inputProps={"title": "quantity", "onFocus": onFocus, "onBlur": onBlur}
type={"number"}
value={value}
onChange={handleChange}
/>;
other info to mention:
ios version = 13.4.1, 13.6
there is a meta user-scalable=0 on the page
OS: iOS 8.1.1
Browser: Safari
Phone: iPhone 5C
We have a web page which takes 100% height and width. We have locked down the viewport so that the user can not scroll the page vertically or horizontally. This page is shared on Twitter via Safari web browser. When we view the the web page in the twitter app the bottom part of the page gets cut off. We are not able to view the page in its entirety. Even if we change the orientation multiple times still the cut off part is not visible.
The height of the part which is getting cut off is equal to the height of the twitter app container’s header (the part which has cross button, page title/url and share link) and the status bar (the part which has network status icon, time, battery level etc)
Note: This behavior is observed in iOS 8 only.
This has also been driving me crazy for the past several hours. The solution is to not use px or percentage based heights/widths but rather use position:fixed on your html and body elements, then setting top, left, right, bottom to 0. So your code will looks like this:
html, body{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
This forces the content to only be as wide and as tall as the viewport presented in twitters webview component without overflowing. Any code inside the body can now be 100% in either direction without fear of being hidden. This bug was affecting iOS9 as well. Confirmed the fix is working on iOS9.1 with latest Twitter app on ip6/6+, ip5, and ip4.
For anyone else coming across this, the fix I ended up using was
window.addEventListener("resize", function(){
onResize();
});
function onResize(){
document.querySelector("html").style.height = window.innerHeight + "px"
};
onResize();
this seems to work in the latest version of twitter's browser on safari.
My program works using the desktop using Chrome, Firefox, Opera. It does work on my Android phone. I want it to work on iPad. It does not work on desktop Safari or Chrome on the iPad, so it is Safari AND Chrome on the iPad.
The program dynamically creates canvas elements. At some point, certain of the elements are rotated in an animation and then re-positioned over other elements. This involves changing zIndex values using JavaScript. The program is here: http://faculty.purchase.edu/jeanine.meyer/twisttest.html
After code doing rotation (that does work):
for (var ci=currentseg;ci<NoS;ci++) {
c = strandCanvases[sB][ci];
c.style.webkitTransform = "rotateY("+degree+"deg)";
c.style.MozTransform = "rotateY("+degree+"deg)";
c.style.msTransform = "rotateY("+degree+"deg)";
c.style.OTransform = "rotateY("+degree+"deg)";
c.style.transform = "rotateY("+degree+"deg)";
}
then this doesn't work appear to change the zIndex values (on desktop Safari or iPad Safari or Chrome)
for(var i=0;i<NoSX;i++) {
sAcanseg = strandCanvases[sAnow][segN+i];
sBcanseg = strandCanvases[sBnow][segN+i];
...
sBcanseg.style.zIndex = "100";
sAcanseg.style.zIndex = "0";
}
Some of the elements are okay and some are not.
Note: the following does work fine on desktop and iPad and Android phone: http://faculty.purchase.edu/jeanine.meyer/braid.html
As another answer points it out, this z-index is not working when 3d transforms are enabled possibly due to this bug.
Possible solution
is to apply -webkit-transform: rotateY(ANG_DEG) translate3d(0,0, Z_IDX) transformation, so you basically will use the z-depth in the 3d space to position your elements.
So in your it should be something like:
c.style.webkitTransform = "rotateY("+degree+"deg) translate3D(0,0, " + zValue + ")";
and only for the ipad.
Note
Chrome on iPad uses the same rendering engine as Safari, so there is not much difference between the two browsers.
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.
I'm trying to use jquery ui dialog and google maps... so when an user clicks a link, the dialog opens showing the map.
I've tried in many ways... it works on FF and Chrome but on IE8 the map is gray.
In one of the changes in script reference order in html head, makes the map loads just a part of it in IE8... tried to load google maps before and after dialog, but nothing changed
It's very confusing... Has anyone gone through this issue??
Thanks!
The jQuery UI documentation for tabs says this, and I think it applies to dialogs as well (you'll need to adjust the code for dialogs).
Any component that requires some
dimensional computation for its
initialization won't work in a hidden
tab, because the tab panel itself is
hidden via display: none so that any
elements inside won't report their
actual width and height (0 in most
browsers).
There's an easy workaround. Use the
off-left technique for hiding inactive
tab panels. E.g. in your style sheet
replace the rule for the class
selector ".ui-tabs .ui-tabs-hide" with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize
the map once the tab is displayed like
this:
$('#example').bind('tabsshow',
function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap() will call Google Maps'
checkResize() on the particular map.