According to this page iOS can read the sms codes and offer it on top of keyboard.
I use a package in my flutter app, that adds autofill=oneTimeCode in my input.
It works well on the iOS native app export, but not works on flutter web export, what's the problem?
I also checked the html code that exported by flutter, and there is autocomplete="one-time-code" here:
<input name="one-time-code" id="one-time-code" type="text" autocomplete="one-time-code" autocorrect="off" class="flt-text-editing transparentTextEditing" style="white-space: pre-wrap; align-content: center; position: absolute; top: 0px; left: 0px; padding: 0px; opacity: 1; color: transparent; background: transparent; outline: none; border: none; resize: none; overflow: hidden; transform-origin: 0px 0px 0px; caret-color: transparent; text-align: center; font: 1px On, Arial, sans-serif; width: 290px; height: 1px; transform: matrix(1, 0, 0, 1, 50.2, 221.5);">
I do not understand what's the problem
Is there any way to change type="text" to type="tel" or type="number" in the exported html code by flutter?
Update: This is a known bug, and flutter team will fix this soon.
https://github.com/flutter/flutter/issues/104693
Related
I have an issue here with 0clue what is going on. I am currently developing an application using ionic angular. The preview on the web version is totally fine and looks good reference image.
But when I deploy it into iOS the button shape is off and there is a white structure blocking part of the header reference image.
I am new to the app developing world, please bear with my stupidity on this.
Can someone guide me in the right direction, please?
ion-toolbar {
--background: #383E56;
height: 102px;
}
ion-header ion-toolbar:last-of-type {
display: flex;
align-items: center;
justify-content: center;
}
.searchbar {
width: 352px;
height: 42px;
background: #C2C3C8;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.6);
border-radius: 90px;
-webkit-position: sticky;
position: sticky;
display: flex;
justify-content: flex-end;
padding: 3px 3px;
margin: auto;
margin-top: 35px;
}
.btn2{
width: 36px;
height: 36px;
border-radius: 50%;
box-sizing: border-box;
background: #F69E7B;
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
//position
position: absolute;
top: 3px;
left: 313px;
//vector size & position
font-size: 27px;
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
<ion-header>
<ion-toolbar>
<div class="searchbar">
<button class="btn2" (click)="toMorePage()">
<ion-icon name="arrow-back-outline"></ion-icon>
</button>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.
The page generates a search box and map.
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>
For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.
I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.
The CSS for these divs is :-
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin-bottom: 12px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid red;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
background-color: white;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
.walkingBritainMapDiv {
padding-top: 75%;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
z-index: 0;
}
Any help would be appreciated to solve this problem.
I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
We would like to publish our IOS APP in some thrid party stores or some OTA(over the air) platforms.
The main reason is being the App is only for a specific group of people. I have read about the official Apple Enterprise account way of doing this but I don't think our company is eligible to get that account.
I came across these options below, which allows us to upload our APK (for android) & IPA (for IOs) files and generate a link for users to download the App:
https://www.installonair.com/
https://www.diawi.com/
Has anyone been using any of these platforms to ship their apps? If yes does this still work in the latest IOS 14?
Thanks in advance
Both the diawi and installonair, work with development, ad-hoc and in-house builds. Development and ad-hoc means that you have to add beforehand the UUID of the devices that the app will be installed(also there is a small limit to the total allowed register devices). These are for distributing your app to testers.
And in-house are applications from an enterprise account. This is for when you intent to distribute you app to users internal to your company. If this is your intent then your company is eligible.
Apple does not give you a way to sidestep the official App store for app distribution.
Note that if you want to use OTA distribution you do not have to use services like diawi or installonair which you mentioned. Those services work however they have some limitations. For example if you use free account on diawi then your app will be available to download only for 3 days and cannot have a size larger than 75MB. Therefore if you plan to have your app available to download for a longer time without size limits and other restrictions then it might be better to host it on any https server. You can even host it on free gitlab.com account (with gitlab pages) without those limitations. You just need to create a proper html file and manifest.plist and put them on your server together with ipa file. If you plan to go this way I can recommend following simple and nice looking html which allows you to download a different app version based on the key that user needs to enter when he opens the html page:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width" name="viewport" />
<title>DOWNLOAD</title>
<style>
body {
text-align:center;
font-family: Arial, Helvetica, sans-serif;
background-color: slategrey;
font-size: 18px;
font-weight: bold;
color: white;
}
a {
border: 10px solid;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 28px;
width: 180px;
height: 180px;
}
.container {
position: fixed;
top: 40%;
left: 50%;
margin-top: -90px;
margin-left: -90px;
}
.box {
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
width: 180px;
height: 180px;
}
.download-icon {
box-sizing: border-box;
position: relative;
display: inline-block;
width: 80px;
height: 30px;
border: 10px solid;
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin-top: 78px;
margin-bottom: 18px;
color: white;
}
.download-icon::after {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
width: 40px;
height: 40px;
border-left: 10px solid;
border-bottom: 10px solid;
transform: rotate(-45deg);
left: 10px;
bottom: 20px;
}
.download-icon::before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
border-radius: 15px;
width: 10px;
height: 50px;
background: white;
left: 25px;
bottom: 25px;
}
.block-icon {
box-sizing: border-box;
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border: 10px solid;
border-radius: 100%;
margin-top: 58px;
margin-bottom: 18px;
}
.block-icon::before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
width: 50px;
height: 10px;
background: white;
border-radius: 25px;
transform: rotate(45deg);
top: 25px;
left: 5px
}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/sha1.js"></script>
<script>
function existsFile(url) {
var http = new XMLHttpRequest();
http.open('GET', url, false);
http.send();
return http.status == 200;
}
var key = prompt("Key:", "");
var hash = String(CryptoJS.SHA1(key));
var url = "https://yourserveraddress.com/apps/" + hash + "/manifest.plist";
if (existsFile(url))
document.write("<div class='container'><div class='download-icon'></div></br>DOWNLOAD</div>");
else
document.write("<div class='container'><div class='box'><div class='block-icon'></div></br>ERROR</div></div>");
</script>
</body>
</html>
To make it work you just need to put ipa files and manifests files in proper folders (named as sha1 hash of your key) on your server and edit url in above html and manifests as needed.
I've created HTML input.
<input type="submit" id="Submitbtn" onclick="javascript:function()" value="Login" name="Submitbtn">
CSS is:
input:hover, input{
background: none repeat scroll 0 0 #1356B4;
border: medium none;
margin-right: 0;
padding: 3px 10px 5px 0;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font: 14px/26px Arial,Helvetica,sans-serif;
height: 26px;
-webkit-transition: all 0.3s ease-in-out 0s;
}
The output in web browsers:
And in iPad:
How to resolve this?
I suppose you must get rid of the webkit appearance on your button by adding in your CSS:
-webkit-appearance: none;