Ionic4 action sheet controller not taking up CSS.
This is my ts code
const actionSheet = await this.actionSheetController.create({
mode: 'md',
cssClass: 'match-item-action-sheet red',
buttons: [{ ...
}]
});
And here is my CSS class
.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.red{
color:red;
}
Here is the live code https://ionic-v4-xbwrsj.stackblitz.io/action-sheet
Below is the expected behavior with class match-item-action-sheet
Use ::ng-deep in css
See working code
::ng-deep .match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red{
color:red;
}
Edit!
According image you attach to question
Set style to .action-sheet-group.sc-ion-action-sheet-md
In css:
::ng-deep .match-item-action-sheet .action-sheet-group.sc-ion-action-sheet-md{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red .action-sheet-group.sc-ion-action-sheet-md{
color:red!important;
}
Write the following in your variables.scss:
.red {
--color: red;
}
And the following in your component's scss:
.action-sheet-group {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
The Action Sheet Buttons color is controlled by the below class .action-sheet-button.sc-ion-action-sheet-ios or you can verify it in the browser inspector.
If you need only change the delete section use this class .action-sheet-destructive.sc-ion-action-sheet-ios.
Add your styles that are needed to be modified and place it the variables.scss as I have done below.
.action-sheet-destructive.sc-ion-action-sheet-ios {
color: red;
}
Also, you have to change similarly to the relevant class in android.
const actionSheet = await this.actionSheetController.create({
mode: 'md',
css-class: 'match-item-action-sheet red',
}]
});
Try above code. Used css-class instead of cssClass.
Refer this for above issue.
Related
I have HTML table in Angular web app.
Get the data from the database via service and display it as text.
One of the columns is Status, so I need to present that variable not as text,
but as a circle of certain color, so if that cell value is "green",
it should show as green circle.
Here is what I have.
CSS (part of Component Styles):
:host ::ng-deep td.circle {
text-align: center;
font-size: 0;
background-color: RED; <--- need to pass param here
}
I define that column as:
.circle {
border-radius: 50%;
height: 24px;
width: 24px;
}
HTML:
<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>
TS for that table:
In constructor:
this.data = {
headers: [],
rows: []
};
ngOnInit() {
this.tableMetricsService.getTableMetrics(
JSON.parse(this.attrs).api,
this.monthSelected
).subscribe(response => {
this.data = response;
}
);
}
Any idea how to "translate" cell value into the CSS background-color ?
TIA,
Oleg.
You could put a data attribute on the html and write a corresponding selector:
[data-status="green"] {
background: green;
}
[data-status="red"] {
background: red;
}
<div data-status="green">Green</div>
<div data-status="red">Red</div>
But I don't see any advantage to this approach over using a regular css class:
.green {
background: green;
}
.red {
background: red;
}
<div class="green">Green</div>
<div class="red">Red</div>
Here is what worked for me:
<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass">
</div>
I'm using Angular 7 with Material Snackbar. I want to changes the color of Snackbar to green.
In app.component.ts, I have:
this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
duration: 4000,
verticalPosition: 'top',
panelClass: 'notif-success'
});
this.snackBarRef.onAction().subscribe(() => {
this.snackBarRef.dismiss();
});
In app.component.scss, I have:
.notif-success {
color: #155724 !important; // green
background-color: #d4edda !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}
But the Snackbar is still shown in its default colors.
I can see that the notif-success class has been applied to the snackbar
<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">
Why is the custom css not working?
You should write that .notif-success CSS class on your main styles.scss, instead of the app.component.scss.
If you are wondering, it is the one which is on the same directory level as your index.html, package.json, etc.
MatSnackBar colors can be customized by adding this CSS rule to the styles.css file. Tested for Angular Material 15.
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: red;
--mdc-snackbar-container-color: black;
--mdc-snackbar-supporting-text-color: yellow;
}
In Angular 15, the answer by Egemen Çiftci is the only one that works for me. I extended it to support different background colors for success and error notifications:
this.snackBar.open('Success', 'Close', {
panelClass: 'app-notification-success',
};
this.snackBar.open('Error', 'Close', {
panelClass: 'app-notification-error',
};
In the global styles.scss:
.mat-mdc-snack-bar-container {
--mat-mdc-snack-bar-button-color: #ffffff;
--mdc-snackbar-supporting-text-color: #ffffff;
&.app-notification-error {
--mdc-snackbar-container-color: #f23a2f;
}
&.app-notification-success {
--mdc-snackbar-container-color: #43a446;
}
}
"panelClass" styles is not being applied to Snack Bar in v15, It's because in v15 the background color is on a different element.
In .css file
.style-error {
color: white;
--mdc-snackbar-container-color: #FF005D !important;
}
In .ts file
openSnackBar(message: string, type:string) {
this._snackBar.open(message,'Ok', {
duration: 2000,
panelClass: ["style-error"]
});
}
Above code will work for Angular v15.
::ng-deep is deprecated as stated by #Akber Iqbal. Put the following code in the global css or scss
snack-bar-container.mat-snack-bar-container {
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
div.mat-simple-snackbar-action {
color: red !important;
}
This styling code worked on #angular/material#11.2.2 with #angular/core#11.2.3
Note: It doesn't work in the component css or scss
This is what you're looking for:
::ng-deep .mat-snack-bar-container{
color: #155724 !important;
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
::ng-deep .mat-simple-snackbar-action {
color: red;
}
complete working demo here
Instead of:
panelClass: 'notif-success'
Try:
extraClasses: ['notif-success']
I had the same issue and stumbled across this Stackblitz that had a working example.
Just realized extraClasses is deprecated, the accepted answer is probably better here.
Is it possible to inject a global CSS class into a styled-component?
Similar to extending in LESS using &:extend or #extend in SASS.
This code doesnt apply the globalCSS styles:
const extendedComponent = styled.div`
&:extend(.globalClass) // I want this component to inherit all styles of .globalaCSS
.otherStyles {
...
}
`
The globalClass does exits and even applies styles when used inline:
extendedComponent(className="globalCSS)
you can just add the "class name" to your element,
but if you really want to inherit or extend.
Use their example as reference:
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// We're extending Button with some extra styles
const TomatoButton = Button.extend`
color: tomato;
border-color: tomato;
`;
docs link:
https://www.styled-components.com/docs/basics#extending-styles
Use attrs: https://styled-components.com/docs/api#attrs
const extendedComponent = styled.div.attrs({
className: 'globalCssClassThatIWantToExtend'
})`
.otherStyles {
/*...*/
}
`;
The attrs function can also accept a props function:
.attrs(props => ({
/*...*/
}))
Is there any contraindications on stylizing Angular2 custom element directly and selecting them with CSS selector ?
Example :
// HTML
<My-Page>
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page>
// CSS
My-Page {
background-color: grey;
}
header {
...
}
.sticky-footer {
position: absolute;
}
Good or bad practice ?
While this is perfectly valid it breaks modularity. A component can style its own root-element:
my-page.component.css
:host{
background-color: grey;
}
header {
...
}
.sticky-footer {
position: absolute;
}
This will achieve the same thing and contains CSS that's vital to your MyPageComponent in the component.
You should use piercing CSS combinators >>>, /deep/ and ::shadow
styles: [
`
:host { background-color: grey; }
:host >>> header{
background:yellow;
}
:host >>> My-Footer{
position: absolute;
}
`
],
template:
`
<My-Page> //<----no need as this becomes your :host
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page> //<----no need
`
i am working in extjs4. i have view with ganttChart. I want to change color of splitter line which is between treecolumn and gantt. i am creating gantt as=
var gantt = Ext.create("Gnt.panel.Gantt", {
itemId :'project-list-gantt-chart',
cls : 'projectlistganttchart',
enableTaskDragDrop: false,
columnLines :true,
lockedGridConfig :{
split: false
},
viewPreset : 'customPreset',
columns : [{
xtype : 'treecolumn',
sortable: true,
dataIndex: 'Name',
}],
And i am including this gantt in my following form panel=
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})
By using panel's add method i am including it as-
afterrender : function(){
var me = this;
me.add(gantt);
}
So for changing color, i change css as-
.x-panel-default{
border-color: red;
padding: 0;
}
But its changing color of all panels within my project. So how to override this css so that it will change color of only gantt.
Use the ui cfg param for that:
// add this config line to your panel that host the gantt
ui: 'gantt'
and add this css
.x-panel-gantt{
border-color: red;
padding: 0;
}
Note that the ui is meant for exactly such things.
You might want to refer to this fiddle. Note that it may miss some css classes but I guess it should show you the trick. And please note that you will need to set the border in a correct way because based on the theme the border might be 0px. That is also done in the example. In addition here is the demo code:
Javascript
Ext.create('Ext.panel.Panel', {
title: 'test',
height: 200,
width: 200,
ui: 'custom',
renderTo: Ext.getBody()
})
CSS (just copied from developer tools)
.x-panel-body-custom {
color: black;
font-size: 13px;
font-size: normal;
}
.x-panel-custom{
border: 1px solid red;
padding: 0;
}
.x-panel-body-custom {
background: white;
border-color: #157fcc;
color: black;
font-size: 13px;
font-size: normal;
border-width: 1px;
border-style: solid;
}
.x-panel-header-custom {
background-image: none;
background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
padding: 9px 9px 10px 9px;
}
You can use id of the component(panel) itself or any top level id of the component in which the panel is rendered like
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}
You should be able to get your gantt item and change the css class of it using something like:
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');
I haven't tested this but you can get the idea.
If you want to reset the css class for the item use .setCls() to set it up from scratch.