How can we change the tab buttons label size in ionic 4? The style is locked inside shadow-DOM:
:host(.layout-icon-top) .tab-btn{
--text-font-size: 20px;
font-size: 20px
}
I tried like this but it didn't work.
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'm making a website and I've got it working on the Mac and the iPad. When I see it on the iPhone, one of the pages doesn't place the background-image correctly.
I'm using 2 background images on the of the website and I've already set it's height to around 1200px. When I see the same page on the iPhone, all the text wraps up and makes the page longe. My footer image stays in the same position and the text overlaps it. Shouldn't it work as the iPad since I've got all the text wrapped inside a ?
I'm noticing that the problem is that the image is set on the body and as it's not a , it will not follow the increased length of the text.
How can I specify a height of that background-image specifically for the Mac + iPad and another one for the iPhone?
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
background:#000;
margin: 0px auto;
background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
background-repeat:repeat-x, repeat-x;
background-position:0px 115px, 0px 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
On the iPad and the Mac, those 950px put the footer image on the exact place I want it. In the iPhone, since I have less area to present the text it simply makes it longer. I need something to say to the website to put the background-image on on position while it's being viewed on the Mac and iPad and another condition to specify a new position for the iPhone.
Thank you.
read some Responsive Web Design Guidelines..Use CSS Media Queries for this...
e.g.:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
I've got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I'm making a mobile version of the same site, and I'd like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
Well only problem is that "clip-path", "mask" and "filter" (no not the
IE "filter" but SVG "filter") only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:
.box { clip-path: url("roundedrect.svg#cp1"); }
while Safari just uses
the shape itself to create clippath from:
.box { clip-path: url("roundedrect.svg"); }
I have yet to discover a
way to do it in Opera and Chrome.
But for FF and Safari "cross browser" example i have created this:
http://tokimon.dk/testing/css-svg-test.html.
Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/
Tokimon
(source: Showing only part of background image using CSS3)
Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and "hide" the part you want to hide (but it's not a very elegant solution)!
Hope this helps!