I have some issues with my Phonegap app concerning the UI. When I view it in my Desktop browser it looks like this(the way it shoul be):
But when I implement it in Phonegap (on iOS) it looks like this:
This is my html:
<div id="page1">
<div id="formScales">
<div class="formContent" id="noise">
<p>Noise</p>
<input type="button" id="nbtn1" value="Noisy" />
<input type="button" id="nbtn2" value="Medium noisy" />
<input class="active" type="button" id="nbtn3" value="Neutral" />
</div>
[...]
</div>
And the CSS:
[...]
#formScales {
position: relative;
/* otherwise the float of the child gets it out
of the document flow */
overflow:auto;
}
input {
color: #3B444B;
width: 100%;
text-decoration: none;
text-align: center;
padding: 8px 12px;
margin-top: 5px;
font-size: 12px;
font-weight: 700;
font-family: helvetica, arial, sans-serif;
border-radius: 2px;
border: 1px solid #606060;
background-color: rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.active {
background-color: #99CCFF !important;
border: 1px solid #606060;
}
#noise {
float: left;
width: 31vw;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 7px;
background-color: rgba(255, 204, 204, 0.3);
}
My guess is that it has something to do with the Objective-C UIWebView class used by iOS... I would be happy about any advice on how to fix this - also what would be best to test the UI without always having to rebuild the PG app!
Thanks in advance!
adding "webkit-appearance:none" to input did the trick!
input {
/* webkit-appearance:none to override standard button design! */
-webkit-appearance: none;
[...]
}
Whether your page contents are overlapping on status bar of i-phone? Actually I unable to see it in screenshot. If it is, then you can do this in your config.xml. I was having same issue, I solved it by adding these lines to config.xml
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="ios-statusbarstyle" value="black-opaque" />
You can test UI on android emulator, without building app on PG-build, but this will not ensure you that you will get correct results for iOS also, I mean if you tested UI on android emulator, then it isn't guaranteed that it will work well on i-phone. So I will recommend you to use PG-build
Related
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
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.
The input number field doesn't render properly on ios. The number gets cut off at the bottom. It works for certain ios versions but not other ones. I'm stuck, please help
input[type=submit] {
text-align: center;
}
.page_q3 input[type="number"] {
height: 91px;
width: 110px;
color: #464356;
font-family: "Source Sans Pro";
font-size: 82px;
font-weight: 600;
text-align: center;
border: none;
border-bottom: 2px solid #464356;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<div class="page_q3">
<div class="div_minus"><img src="<?=$templateDir?>/images/minus.jpg" class="minus" data-quantity="minus" data-field="<?=$inputName?>" /> </div>
<div class="div_number"><input type="number" id="<?=$inputName ?>" name="<?=$inputName?>" value="<?=$_SESSION[$inputName]?>" placeholder="0" /> </div>
<div class="div_plus"><img src="<?=$templateDir?>/images/plus.jpg"
class="plus" data-quantity="plus" data-field="<?=$inputName?>" /> </div>
</div>
What it should look like
https://ibb.co/y8msSpL
what it actually looks like
https://ibb.co/rkbyPF5
You might want to try removing the border-radius and padding that are added by iOS by default:
.page_q3 input[type="number"] {
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
}
I have mvc .net core project in bootstrap 4, as you can see the image functionality is working fine however there is no drag and drop functionality in the center, if I try to drag the image on "Choose file" it works but not in the center so could you please help me with just drag and drop functionality.
I don't want the code to upload and the image should not be uploaded to the server side, also need to ensure that there is close button on the right hand side which should remain intact.
JavaScript
$('.img-wrap .close').on('click', function () {
var id = $(this).closest('.img-wrap').find('imgInp').data('id');
$('#imgInp').attr('src', '');
$("#file").val('');
});
CSS
.imgdrop {
height: 30px;
}
.img-wrap {
position: relative;
display: inline-block;
border: 1px red solid;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #FFF;
padding: 5px 2px 2px;
color: #000;
font-weight: bold;
cursor: pointer;
opacity: .2;
text-align: center;
font-size: 22px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
}
HTML
#Html.Label("Image"#*, new { #class = "control-label col-md-2"}*#)
<div class="col-md-3">
<input type="file" id="file" name="file" class=" imgdrop" multiple="multiple" />
<div class="img-wrap">
<span class="close">×</span>
<img src="#" alt="Alternate Image" id="imgInp" width="200" height="200" />
</div>
</div>
I have written a css file
.atleastTwoChars:after {
content: "2*";
float: left;
width: 16px;
height: 14px;
border: 0;
margin: 2px 3px 0px 3px;
color: red;
}
I have used like this
<nobr>
<input type="hidden"
name="ctl00$objContentPageTag$spzContactInformation$txt_sContactZipCode$objHidden"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_objHidden" value="0">
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactZipCode$objTextBox"
type="text"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_objTextBox"
class="xqh_LookUpTextBox_Edit">
<span id="ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_spanImgMandatory"
class="atleastTwoChars">
</span>
</nobr>
JavaScript:
$('#ctl00_objContentPageTag_spzContactInformation_txt_sContactZipCode_spanImgMandatory')
.removeClass("xqh_LookUpTextBox_ImgMandatory")
.addClass("atleastTwoChars");
$('img[id*="txt_sContactZipCode_imgMandatory"]').remove();
problem: content (2*) should be displayed at the end of the text box but it is displaying at the start like this.
Remove the float: right; from your CSS: JS Fiddle demo.
Incidentally, according to W3, nobr:
[...is] entirely obsolete, and must not be used by authors...
Reference:
Obsolete features, at the W3.org
The float: left; will make it display at the start of the line. Perhaps you want to use display: inline-block; instead. Or just remove the float, height and width.