We have just upgraded from Ionic beta 14 to the Ionic 1.0.0 release. After the upgrade we have one issue left which I can't solve.
I have added 2 CodePens to show the problem, being:
1.0.0-beta.14: http://codepen.io/anon/pen/LVxxzM
1.0.0: http://codepen.io/anon/pen/rVjjYJ
<ion-modal-view style="width: 50%;">
If you look at the 1.0.0-beta.14 CodePen and open the modal by hitting the button top right and you make your browser view smaller than 680px you will see that the modal still has a dark background around it.
Do the same with the 1.0.0 CodePen en you will see the dark background color is gone. Any ideas howto fix this?
Add the following to your CSS:
#media (max-width: 680px) {
.active .modal-backdrop-bg {
opacity: .5;
transition: opacity 300ms ease-in-out;
background-color: #000;
}
}
Related
I'm doing a mobile app using Ionic 6.1.4 and Capacitor 3.5.1.
Android, looks good by default, black background and white icons on any screen.
iOS, always has whatever the background color I have in the ion-content with black icons. Is always like this on any screen. In my app, I have 2 screens with a dark background and the ion-content with the attribute fullscreen.
iOS, as I said, I have two screen with a very dark background, let's replicate it using a black background. See how the icons are not visible anymore?
Component:
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button color="white"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
</ion-content>
Style:
ion-toolbar {
--background: transparent;
}
ion-content {
--background: black;
}
How can I change iOS Status Bar to always have a style just like Android?
or even better, how can I leave the Status Bar untouched on iOS (app not modifying the Status Bar at all)?
I have tried:
.ios {
ion-header {
margin-top: var(--ion-safe-area-top);
}
ion-toolbar {
margin-top: var(--ion-safe-area-top);
--padding-top: var(--ion-safe-area-top);
padding-top: var(--ion-safe-area-top);
}
}
But this just moves all the content down and Status Bar is keeping the background color of my app.
I was thinking to use the plugin called #capacitor/status-bar to change the Status Bar style just on iOS, but it's not so simple in my case. Since I have 2 screens with dark background, I will need to make the Status Bar Dark when enter, and when onDestroy is called, make it back to Light so my other screens which have white background looks good too. I think this is a tedious process. I think there must be a way to avoid this.
My goal is to keep the Status Bar on iOS always the same and with a color that makes the icons visible. I would prefer leaving the Status Bar untouched just like Android do.
I don't know about Capacitor, but I know that on Cordova for iOS, you need to include viewport-fit=cover in the <meta name="viewport" content="..."> tag of your index.html to do this, e.g.
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
This works for me when using the cordova-plugin-statusbar plugin, anyway.
Well, I suggest trying one of the followings:
If you are using Cordova, use the cordova-status-bar plugin and try setting the statusBar color in the config.xml:
<preference name="StatusBarBackgroundColor" value="#000000" />
or
<preference name="StatusBarBackgroundColor" value="#ffffff" />
setting it to a value in hex color, probably you want it black, and then setting the text and icons to light or lightcontent as you did in Android by using:
<preference name="StatusBarStyle" value="lightcontent" />
If you are using Capacitor, install the Capacitor plugin
npm install #capacitor/status-bar
npx cap sync
and then set the color of the background and text using
import { StatusBar, Style } from '#capacitor/status-bar';
// iOS only
window.addEventListener('statusTap', function () {
console.log('statusbar tapped');
});
const setStatusBarStyleDark = async () => {
await StatusBar.setStyle({ style: Style.Dark });
};
Finally, if none of that works, or you just want to change it on iOS try setting it in the global.scss as you were doing but also changing the backgound color and the color:
.ios {
ion-header {
margin-top: var(--ion-safe-area-top);
background-color: black;
color: white;
}
ion-toolbar {
margin-top: var(--ion-safe-area-top);
--padding-top: var(--ion-safe-area-top);
padding-top: var(--ion-safe-area-top);
background-color: black;
color: white;
}
}
I am using Ionic 4. On my Login Page whenever keyboard is pressed, background image scrolls up. I found no workaround until now.
I applied below css to ion-content:
ion-content{
--background: #fff url('/assets/img/bigscren.jpg') no-repeat center center / cover !important;
--background-size: cover !important;
--background-attachment: fixed;
}
This is my front page:
<ion-content padding>
//My Content
</ion-content>
I also applied fixed attribute to ion-content (from latest ionic doc) but that also not working.
Please help me out. Thanks!
http://ingoodtastemag.com/
On an iPhone, the button is round with a gradient. However, on every other desktop browser and Android that we've tested so far, it is square. I want the button to stay square. What CSS resets do I need for this?
This rounded corner is the default property of the Safari browser and iOS 5 devices. To overwrite it, use the following styling for your button:
-webkit-appearance: none;
border-radius: 0;
To keep your own border radius while removing the iOS styling
-webkit-appearance: none;
-webkit-border-radius: none;
border-radius: 10px;
You must remove webkit's border-radius to get your own style back, but you can still add your own border-radius after you remove theirs.
You could try to use this property on your button attribute.
border-radius: 0
I am making a Responsive site using the foundation framework and TinyMCE breaks the format when the page is scaled down(it's not responsive). How do I make TinyMCE responsive?
The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.
E.g., I use css similar to this:
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
width: 100% !important;
}
/* on large screens, I use a different layout, so 600px are sufficient */
#media only screen and (min-width: 600px) {
table.mceLayout, textarea.richEditor {
width: 600px !important;
}
}
See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/
Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.
There is a way to get the toolbars to wrap on smaller screens.
/* make the toolbar wrap */
.mceToolbar td {
display:table-row;
float: left;
}
.mceToolbar td:nth-of-type(11){
clear: left;
}
I made a fork of the fiddle that Johannes posted that includes the above rules:
http://jsfiddle.net/joshfeck/gMVSE/
Making the toolbar responsive for the latest version of TinyMCE:
.tox-toolbar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.tox-toolbar__group {
flex-wrap: nowrap !important;
}
This adds a horizontal scrollbar to the toolbar on mobile devices.
TinyMCE 5.1 was released with a new mobile responsive design.
To ensure it functions as intended, you need to add the following code to the head of your pages that are using TinyMCE.
<meta name="viewport" content="width=device-width, initial-scale=1">
More information here: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it
I'm using version 4 of TinyMCE, there is a plugin named autoresize. It makes the editor responsive.
Here is something I use on a site to make the editor resize and the toolbars moves with the size of the page :
.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}
.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
}
table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}
Using small toolbar, they are properly layed out as the editor width changes.
"theme_advanced_resizing" should be set to "false". Also, more work is needed to make it work with fullscreen.
Remove Width and height from the TINYMCE_DEFAULT_CONFIG.
then apply your styling normally.
i am using this in the CSS:
div.tox.tox-tinymce {
width: 200px !important;
}
I use !important because tinymce using inline styling for that div, use #media if necessary.
a cropped screenshot from firefox inspector
I noticed that if I style my buttons with CSS using radius, colors and borders, they look good but in the iphone/ipad/ipod they look terrible...shouldn't be the same rendering as in Safari Desktop??
Oops! I just found this myself. Just add this line on any element you need:
-webkit-appearance: none;
Add this code into the css file:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
This will help.
The above answer for webkit appearance worked, but the button still looked kind pale/dull compared to the browser on other devices/desktop. I also had to set opacity to full (ranges from 0 to 1)
-webkit-appearance:none;
opacity: 1
After setting the opacity, the button looked the same on all the different devices/emulator/desktop.