I am using a code like this in ionic 2.0.0rc4
<ion-list>
<ion-list-header>My Header</ion-list-header>
<!-- rest of ion-items -->
</ion-list>
In the documentation examples, list header's background is gray but in my app it has a white background! I don't know what is going on!
Any idea?
Cheers!
As per documentation, following SASS variable is used to set the list header background for ios $list-ios-header-background-color and its default value is transparent.
If you look closely, in the documentation also, color is coming grey for iOS and white for android & windows phone.
hope this helps.
Related
<ion-select-option *ngFor="let make of makes" [value]="make?.code">
{{make?.name}}<span class="change-stuff">example</span>
</ion-select-option>
I want to be able to have a span or div with some css inside the ion-select-option is this possible?
For example the text example I might want to have a green background or some other custom style
I'm afraid this cannot be done, for now. Here you can check a GitHub issue in which someone asks exactly for that functionality.
It seems that it will be included in Ionic 6.
I am working on an Ionic app that uses both Ionic Themes and Angular Materials. In some instances I am using and in some of those instances I am attempting to change the button color as such for example. When setting the ion-button to any given color it is rendered as white.
I've tried making updates to my scss files and to make sure the theme is incorporated correctly. I've spent an entire day searching for solutions and have found no answers. I was under the impression that Ionic themes are default in an Ionic app and am not sure why this isn't working.
0" padding no-bounce text-center fullscreen expand="block">
DELETE STUDENT INFORMATION
button is rendered as white
For button background try below.
<ion-button color="white">Button</ion-button>
If this doesn't work, please share your code. I will update your code.
so - using material-ui v1.2.0 (and in all versions before). I started with the default example from the "Component Demos" / "Drawers" / "Mini variant drawer" example and changed
<AppBar position="absolute" className="...">
to
<AppBar position="fixed" className="...">
and now the issue is, that when I scroll down on iOS (tried on several iPads and iPhones) but I'm already at the top, the AppBar is overlaid by the background from the body (see attached screenshot with body {background:gold})
I already played with top:0 and/or adjusting the zIndex, but no success.
Thank you so much in advance
Ok, I was able to fix it - remove the
root: {... overflow:hidden ...}
And it works
I'm using the IONIC Google Maps native plugin and followed this tutorial:
https://www.javascripttuts.com/implementing-native-google-maps-in-an-ionic-application/
So it works, but, I have a white background color. According to the tutorial there is a css fix :
ion-app .nav-decor{
background-color: transparent !important;
}
But this doesn't work. Does anybody have this same issue?
In order to change the background color, you need to use Environment.setBackgroundColor("red");
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Environment/setBackgroundColor/README.md
I'm trying to customize Linkedin's Company Insider Plugin and there aren't many options or documentation around to change background color to transparent.
As far as I've seen this plugin has two iframes nested. The white background color is inside the second one in a <div class="wrapper">.
There are some options available for the Profile plugin like data-width or data-format as this answer describes:
Change Linkedin Company Profile plugin Width
Any clues about the background color?
Before any answer about jQuery like this won't work:
$("#iframe").contents().find(".wrapper").css('background-color', 'transparent');
LinkedIn's widget does not provide any official support for this level of customization at this time.