Is it possible to set different styles when my app is on an IOS or Android device in HTML or CSS?
For example, IOS devices space out <ion-title> differently than Android devices.
In that case you can use something like this.
.ios ion-title {
color: black;
}
.md ion-title {
color: blue;
}
Also you can check it out the official documentation here Ionic Platform Style
The accepted answer did not work for me in Ionic3 however the following did. I am targeting my component GotosComp displayed via ModalController and wanted some margin around it on the mobile running from the web (PWA). Apparently the margin is there automatically when I run in desktop mode browser/responsive.
.platform-mobile {
GotosComp {
margin: 10vmin;
height: 50vh;
width: 80vw;
}
}
Also you can use .platform-core if you wanted to target just the desktop browser
Perhaps it will help someone.
Related
I am using React Material UI and want to implement max length for a TextField component.
I tried to set max length in inputProps as below -
<TextField
id="name"
label="Name"
inputProps={{ maxLength: 5 }}
/>
This works in desktop browsers as expected, but doesn't seem to work in mobile devices browsers, expecially in most Android mobiles with Chrome latest version.
Not sure about IOS, as not tested in that environment.
Please refer the stackblitz here for reference.
To replicate, please open the above stackblitz in a mobile device browser prefebaly in Chrome.
I can go with regex, but I think setting up max length attribute to a field seems very clean and semantic.
Please let know if there is any way.
If your input filed type='number' then it will not work.
You can try this solution. I think it will work.
<TextField
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>
I use the following rule
.topbtns
{
position:absolute;
bottom:95vh;
right:0;
left:0;
top:calc(95vh - 21vw - 1.2em);
text-align:center;
}
which is used to position a pair of buttons bottom-center of the screen
<div class='topbtns'>
<div class='tear t-tosponsor'><div>View Storefront</div></div>
<div class='tear t-continue' id='btnContinue'><div>Continue</div></div>
</div>
This works perfectly in my Chrome browser on Windows - even with device emulation turned on. $('.topbtns')[0].getBoundingClientRect() returns
{top: 538.2374877929688, right: 375.20001220703125, bottom:
538.2374877929688, left: 0, width: 375.20001220703125…}
However, when I use the same HTML & CSS and build it into my Android Phonegap app .topbtns is nowhere in sight. The same getBoundingClientRect code returns
{height:111,width:360,left:0,right:360,bottom:-497.875,top:-60}
I thought this might be because
The Android Webview does not understand vh units. However, I modified the rule to use `bottom:95vh;top:75vh} which worked perfectly.
I also replaced calc with -webkit-calc but to no avail.
It is as though calc and its -webkit-calc cousin does not understand vh whilst the webview itself does.
I would be obliged to anyone who might be able to express what is going on here.
Whilst writing this I have come across this - http://slides.com/html5test/the-android-browser#/. However, it is not clear to me that the WebView used by Phonegap is the one being discussed here.
I believe this could help you, the calc feature is not supported in some versions of Android (<= 4.4.4), so the problem is not Phonegap / Cordova, is the Device where you test that probably does not supported it
I'm working in a app with Ionic-tabs, and when i run on android device, the tabs are covering the content.
The usually fix is set has-tabs-top on the content div, but ionic has-tabs.pane are overwritten has-tabs-top css
.has-tabs.pane, .bar-footer.has-tabs.pane {
bottom: 49px;
height: auto;
}
.has-tabs-top {
top: 93px;
}
<ion-content padding="true" class="has-tabs-top">
I'm looking a way to fix it without changing the css class
You need to add this in your config method of your app module
$ionicConfigProvider.tabs.position("bottom"); //Places them at the bottom for all OS
$ionicConfigProvider.tabs.style("standard"); //Makes them all look the same across all OS
I know there are questions on this issue, but I tried everything and do not fix my mistake! X__X
I have a mobile application (astronomical) for Android and when I use to load another html, in the transition makes a white flash that I can't remove (I tried removing the transitions "slide" to use and nothing, background: # 000000! important, etc. ..). I use jQuery mobile 1.3.1 and Phonegap 2.9.0.
I'll share a video where you can see better the problem: http://www.youtube.com/watch?v=ykjCN03nOCM
Any help??
Regards,
Daniela.
CSS :
.ui-page {
-webkit-backface-visibility: hidden;
}
Code :
The CSS solution from this thread didn't work for me (Android 2.x).
I disabled the transistion with data-transition="none" in all links and everything was ok. It should also work when set on page-level, but it didn't work for me (jQuery Mobile 1.0). This is the code:
// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
$("a").attr("data-transition", "none");
}
Another (the better) way would be to set the default transitions for jQuery Mobile:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
iPhone performs the transitions hardware-accelerated, while the other platforms perform it per software. This explains why only iPhone performs smooth transitions.
Try this one here: here
Maybe your transitions will be more smoothly then.
I have the following setup (view in a narrow window, <750px wide): http://codepen.io/darrylhein/pen/oFalc
The problem is that the hide/show of the navigation doesn't work in Android's default browser. It seems to work pretty much everywhere else. (It does work in Firefox on Android.)
Basically I'm using input:checked ~ .class { height: 16em; } to show the nav.
I've tried removing the transition and a variety of other things and it doesn't seem to work.
Any ideas?
I'd like to avoid using JS, but if I have to I will.
So, 2 parts to the solution:
1) The problem occurs on Android <4.1.2. The solution is to add a fake animation on the body:
body { -webkit-animation: bugfix infinite 1s; }
#-webkit-keyframes bugfix {
from { padding:0; }
to { padding:0; }
}
2) There is also a problem on iOS <6 where labels do not check checkbox. The solution is to add an onclick to the label:
<label for="checkbox" onclick>Menu</label>
I found the solutions here: http://timpietrusky.com/advanced-checkbox-hack
I've also updated the codepen: http://codepen.io/darrylhein/pen/oFalc