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.
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 have a long modal that doesn't fully display on my android mobile device, the buttons are bellow the bottom of the screen, the modal doesn't scroll at all but the grayish background behind the modal does, is there any css/js trick to lock the background and allow the modal to scroll while this one is displayed ?
It may because of the modal class position is fixed...
Try put the code below to your css file, it's work for me...
#media (max-width: 767px) {
.modal {
position: absolute;
overflow:visible;
}
.modal-open {
overflow:visible;
}
}
This was supposed to be fixed with Bootstrap 3, but it is not working for me. I was able to fix wit with a combination of -webkit-overflow-scrolling CSS property and setting the max-height of my modal. Since I wanted my modal to fill the whole screen, I had to wire up some javascript to detect mobile devices and the set the max-height of my .modal-content to the viewport height of my device
Here is what I did to solve this using a library called jRespond:
Add this CSS to your modals
#media (max-width: $screen-xs-max) {
.modal-dialog {
.modal-content {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
}
}
Add jRespond to your application
https://github.com/ten1seven/jRespond/edit/master/js/jRespond.js
Add the following code to your main.js script
/* This code handles the responsive modal for mobile */
var jRes = jRespond([{
label: 'handheld',
enter: 0,
exit: 767
}]);
jRes.addFunc({
breakpoint: 'handheld',
enter: function() {
$('.modal-content').css('max-height', $(window).height());
$(window).on('orientationchange', function () {
$('.modal-content').css('max-height', $(window).height());
});
},
exit: function () {
$('.modal-content').css('max-height', "");
$(window).off('orientationchange');
}
});
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
Bootstrap modals don't work correctly on Android and iOS. The issue tracker acknowledges the problem but does not offer a working solution:
Modals in 2.0 are broken on mobile.
Modal window in 2.0 not positioning properly
The screen darkens but the modal itself is not visible in the viewport. It's possible to find it at the top of the page. The problem occurs when you've scrolled down on the page.
Here is a relevant portion of bootstrap-responsive.css:
.modal {
position:fixed;
top:50%;
left:50%;
z-index:1050;
max-height:500px;
overflow:auto;
width:560px;
background-color:#fff;
border:1px solid #999;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
background-clip:padding-box;
margin:-250px 0 0 -280px;
}
Is there a fix I can apply?
EDIT: An unofficial Bootstrap Modal modification has been built to address responsive/mobile issues. This is perhaps the simplest and easiest way to remedy the problem.
There has since been a fix found in one of the issues you discussed earlier
in bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
and in bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
Gil's answer holds promise (the library he linked to) --- but for the time being, it still doesn't work when scrolled down on the mobile device.
I solved the issue for myself using just a snippet of CSS at the end of my CSS files:
#media (max-width: 767px) {
#content .modal.fade.in {
top: 5%;
}
}
The #content selector is simply an id that wraps my html so I can override Bootstrap's specificity (set to your own id wrapping your modal html).
The downside: It's not centered vertically on the mobile devices.
The upside: It's visible, and on smaller devices, a reasonably sized modal will take up much of the screen, so the "non-centering" won't be as apparent.
Why it works:
When you're at low screen sizes with Bootstrap's responsive CSS, for devices with smaller screens, it sets .modal.fade.in's 'top' to 'auto'. For some reason the mobile webkit browsers seem to have a hard time with figuring out the vertical placement with the "auto" assignment. So just switch it back to a fixed value and it works great.
Since the modal is already set to postition: absolute, the value is relative to the viewport's height, not the document height, so it works no matter how long the page is or where you're scrolled to.
The solution by niftylettuce in issue 2130 seems to fix modals in all mobile platforms...
9/1/12 UPDATE: The fix has been updated here: twitter bootstrap jquery plugins
(the code below is older but still works)
// # Twitter Bootstrap modal responsive fix by #niftylettuce
// * resolves #407, #1017, #1339, #2130, #3361, #3362, #4283
// <https://github.com/twitter/bootstrap/issues/2130>
// * built-in support for fullscreen Bootstrap Image Gallery
// <https://github.com/blueimp/Bootstrap-Image-Gallery>
// **NOTE:** If you are using .modal-fullscreen, you will need
// to add the following CSS to `bootstrap-image-gallery.css`:
//
// #media (max-width: 480px) {
// .modal-fullscreen {
// left: 0 !important;
// right: 0 !important;
// margin-top: 0 !important;
// margin-left: 0 !important;
// }
// }
//
var adjustModal = function($modal) {
var top;
if ($(window).width() <= 480) {
if ($modal.hasClass('modal-fullscreen')) {
if ($modal.height() >= $(window).height()) {
top = $(window).scrollTop();
} else {
top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
}
} else if ($modal.height() >= $(window).height() - 10) {
top = $(window).scrollTop() + 10;
} else {
top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
}
} else {
top = '50%';
if ($modal.hasClass('modal-fullscreen')) {
$modal.stop().animate({
marginTop : -($modal.outerHeight() / 2)
, marginLeft : -($modal.outerWidth() / 2)
, top : top
}, "fast");
return;
}
}
$modal.stop().animate({ 'top': top }, "fast");
};
var show = function() {
var $modal = $(this);
adjustModal($modal);
};
var checkShow = function() {
$('.modal').each(function() {
var $modal = $(this);
if ($modal.css('display') !== 'block') return;
adjustModal($modal);
});
};
var modalWindowResize = function() {
$('.modal').not('.modal-gallery').on('show', show);
$('.modal-gallery').on('displayed', show);
checkShow();
};
$(modalWindowResize);
$(window).resize(modalWindowResize);
$(window).scroll(checkShow);
We use this code to center the Bootstrap modal dialogs when they open. I haven't had any issue with them on iOS while using this but I'm not sure if it will work for Android.
$('.modal').on('show', function(e) {
var modal = $(this);
modal.css('margin-top', (modal.outerHeight() / 2) * -1)
.css('margin-left', (modal.outerWidth() / 2) * -1);
return this;
});
Admittedly, I haven't tried any of the solutions listed above but I was (eventually) jumping for joy when I tried jschr's Bootstrap-modal project in Bootstrap 3 (linked to in the top answer). The js was giving me trouble so I abandoned it (maybe mine was a unique issue or it works fine for Bootstrap 2) but the CSS files on their own seem to do the trick in Android's native 2.3.4 browser.
In my case, I've resorted so far to using (sub-optimal) user-agent detection before using the overrides to allow expected behaviour in modern phones.
For example, if you wanted all Android phones ver 3.x and below only to use the full set of hacks you could add a class "oldPhoneModalNeeded" to the body after user agent detection using javascript and then modify jschr's Bootstrap-modal CSS properties to always have .oldPhoneModalNeeded as an ancestor.
you can add this property globally in javascript:
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
}
OK this does fix it I tried it today Sept 5-2012 but you have to be sure to check out the demo
The solution by niftylettuce in issue 2130 seems to fix modals in all
mobile platforms...
9/1/12 UPDATE: The fix has been updated here:
twitter bootstrap jquery plugins
here is the link to the Demo
It works great heres the code I used
title_dialog.modal();
title_dialog.modalResponsiveFix({})
title_dialog.touchScroll();
My solution...
Ver en jsfiddle
//Fix modal mobile Boostrap 3
function Show(id){
//Fix CSS
$(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"});
$(".modal-body").css("overflow-y","auto");
//Fix .modal-body height
$('#'+id).on('shown.bs.modal',function(){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
h1=$("#"+id+">.modal-dialog").height();
h2=$(window).height();
h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
h4=h2-(h1-h3);
if($(window).width()>=768){
if(h1>h2){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
}
$("#"+id+">.modal-dialog").css("margin","30px auto");
$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);
if($("#"+id+">.modal-dialog").height()+30>h2){
$("#"+id+">.modal-dialog").css("margin-top","0px");
$("#"+id+">.modal-dialog").css("margin-bottom","0px");
}
}
else{
//Fix full-screen in mobiles
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
$("#"+id+">.modal-dialog").css("margin",0);
$("#"+id+">.modal-dialog>.modal-content").css("border",0);
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);
}
//Aply changes on screen resize (example: mobile orientation)
window.onresize=function(){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
h1=$("#"+id+">.modal-dialog").height();
h2=$(window).height();
h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
h4=h2-(h1-h3);
if($(window).width()>=768){
if(h1>h2){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
}
$("#"+id+">.modal-dialog").css("margin","30px auto");
$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);
if($("#"+id+">.modal-dialog").height()+30>h2){
$("#"+id+">.modal-dialog").css("margin-top","0px");
$("#"+id+">.modal-dialog").css("margin-bottom","0px");
}
}
else{
//Fix full-screen in mobiles
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
$("#"+id+">.modal-dialog").css("margin",0);
$("#"+id+">.modal-dialog>.modal-content").css("border",0);
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);
}
};
});
//Free event listener
$('#'+id).on('hide.bs.modal',function(){
window.onresize=function(){};
});
//Mobile haven't scrollbar, so this is touch event scrollbar implementation
var y1=0;
var y2=0;
var div=$("#"+id+">.modal-dialog>.modal-content>.modal-body")[0];
div.addEventListener("touchstart",function(event){
y1=event.touches[0].clientY;
});
div.addEventListener("touchmove",function(event){
event.preventDefault();
y2=event.touches[0].clientY;
var limite=div.scrollHeight-div.clientHeight;
var diff=div.scrollTop+y1-y2;
if(diff<0)diff=0;
if(diff>limite)diff=limite;
div.scrollTop=diff;
y1=y2;
});
//Fix position modal, scroll to top.
$('html, body').scrollTop(0);
//Show
$("#"+id).modal('show');
}
Found a very hacky solution to this problem, but it works.
I added a class to the link that is used to open the modal (With the data-target), then using Jquery, added a click event to that class that gets the data-target, finds the modal it is supposed to open, and then opens it via Javascript. Works just fine for me. I also added a mobile check on mine so that it only runs on mobile, but that's not required.
$('.forceOpen').click(function() {
var id = $(this).attr('data-target');
$('.modal').modal('hide');
$(id).modal('show');
});
Mainly Nexus 7 modal issue , modal was going down the screen
.modal:before {
content: '';
display: inline-block;
height: 50%; (the value was 100% for center the modal)
vertical-align: middle;
margin-right: -4px;
}
For me just $('[data-toggle="modal"]').click(function(){}); is working fine.
Albeit this question is quite old, some people still may stumble upon it when looking for solution to improve UX of modals on mobile phones.
I've made a lib to improve Bootrsrap modals' behavior on phones.
Bootstrap 3: https://github.com/keaukraine/bootstrap-fs-modal
Bootstrap 4: https://github.com/keaukraine/bootstrap4-fs-modal