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.
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 know there are already similar questions about setting a content/page background in ionic 4, but I did manage to set it, BUT all my experiments also set the ion-card background to the content's colour, which is not really what I want. I also tried setting the background colour to the ion-grid elem using ids and classes, with the same result.
When I try styling just the body, the content's background is not affected at all.
I can probably style the other elements in the content, but I would rather know, what am I missing here in the way the ionic elements are designed to be used, and how to achieve just the background of the page coloured, not the elements on it in the content.
ion-content {
--ion-background-color: yellow;
}
From what I've found with experimenting is that --ion-background-color: sets a global background default (which defaults to #fff if not set) for ionic components. To just target ion-content it would be better to set it like ion-content {--background : #f4a942;}. You can set an ion-grid background like so ion-grid {background: #aaa;}. The issue with the ion card is that by default its background is set to var(--ion-item-background,transparent), so it will use the ion-item-background if one is set or it will be transparent, you can ignore all this by declaring the background with !important like ion-card{--background: #aaa !important;}.
If you want to find out if the component needs a --background or just background I've been having to check the ionic docs to see if it has --background in its CSS Custom Properties :/
Does anyone know how to place an icon in a toggle?
Is this even possible with the new shadow dom rules?
https://beta.ionicframework.com/docs/api/toggle/
I have tried placing a icon element in the toggle but no succes.
Thanks,
Kelvijn
It's not possible to add attributes to ion components.
Confirmed by admin from the ionic slack.
Going to make my own slider then.
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.
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.