I want to create css element inside ts file and pass it as a styleClass to PrimeNg Toast.
var style = document.createElement('style');
style.innerHTML = '::ng-deep .cssClass { background-color: #e62323; border: solid #8A427A; border-width: 0 0 0 6px; color: #2c1e30; }';
this.messageService.add({severity:'custom', summary:'Service Message', detail:'Via MessageService', styleClass: 'cssClass', sticky: true});
The above code is not working for me, style is not applied.
Could someone help me with that?
EDIT: I tried to catch the p-toast and append style but it's not applied still.
setTimeout(() => {
let message = document.getElementsByClassName('p-toast-message-custom')[0];
message.appendChild(style);
}, 100)
In Angular we should not set a style with directly DOM manipulation. The reason is:
Angular cannot detect changes if you do this by hand
Angular render components and create and update the DOM.
So its possible, but not a good way. In your case, set append the element to the DOM. Then it will works, I think.
The Angular Way
Each component has it one contained CSS/SCSS.
What you can do is to use Angulars board means, like ngStyle, ngClass and so on. example:
<div [ngStyle]="{'background-color':'green'}"></<div>
You can do it with property binding, too:
// Code
getColor(country) { (2)
switch (country) {
case 'UK':
return 'green';
case 'USA':
return 'blue';
case 'HK':
return 'red';
}
}
// Html
<div [ngStyle]="{'color':getColor(person.country)}">Test</div>
ngClass does the same but let you set a class flexible to any component.
// Code
val: number = 9;
// Html
<td [ngClass]="val > 10 ? 'red' : 'green'">{{ val }}</td>
Link to ngClass docu, link to ngStyle docu.
To add a class to a message using PrimeNG's MessageService, you can use the add method and provide an optional options object that includes a styleClass property.
Here's an example code snippet that demonstrates how to add a class to a message:
import { Component } from '#angular/core';
import { MessageService } from 'primeng/api';
#Component({
selector: 'app-my-component',
template: `
<button (click)="showSuccess()">Show Success Message</button>
`,
providers: [MessageService]
})
export class MyComponent {
constructor(private messageService: MessageService) {}
showSuccess() {
this.messageService.add({severity:'success', summary:'Success', detail:'Message Content',
options: {styleClass: 'my-custom-class'}});
}
}
.my-custom-class {
background-color: #b3ffb3;
color: #006600;
border: 1px solid #006600;
border-radius: 5px;
padding: 10px;
}
I am trying to add new line in alert box.
I tried appending "\n" "< br >" and "< ul > < li >"
but still no luck
Can you please advise
I am using angular 6 and ng-bootstrap 3.x.x
alert-basic.ts
import { Component } from '#angular/core';
#Component({
selector: 'ngbd-alert-basic',
templateUrl: './alert-basic.html'
})
export class NgbdAlertBasic {
alertType = "danger";
alertMessage="< ul > < li > Why this is happening with me?< /li >< li > Can you solve the puzzle Pleazze < /li >< /ul > ";
}
alert-basic.html
< ngb-alert *ngIf="alertMessage" type="{{alertType}}" (close)="alertMessage = null">{{ alertMessage }}< /ngb-alert>
Usage of #ng-bootstrap alert:
https://stackblitz.com/angular/vkgxbmgdglnx
Works for me
I would like to change the row's background when the user hovers over them (useful help, row tracking).
I tried to apply a CSS class (<class>:hover) to every row using [rowClass], which works in theory, but the style won't get applied.
<kendo-grid [rowClass]="rowCallback" [data]="gridData" [height]="410">
...
export class AppComponent {
public gridData: any[] = products;
rowCallback(context) {
return 'styler';
}
}
Stackblitz: https://stackblitz.com/edit/grid-hover-color-test
The most straight-forward approach would be to target the hovered rows via CSS and add the desired styling, e.g.:
encapsulation: ViewEncapsulation.None,
styles: [`
.k-grid tr:hover {
background-color: yellow;
}
`]
EXAMPLE
I am using FullCalendar component and I need to color the weekends ,Friday & Saturday.
I have used the following as recommended here:
Can I set a different color for the weekend on monthly fullCalendar display
$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
I added as well the css class.
Here is me code that doesn't color the weekends ... Any advise!
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$.getJSON('[#spring.url '/loadSomeData'/]', function (data) {
$.getJSON('[#spring.url '/loadOtherData/]', function (info) {
information = returnedPublicVacation;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select:
function(start, end, allDay) {
vacationStart = start;
showTheCorrectDialog(vacationStart);
},
eventClick: function(calEvent, jsEvent, view) {
showTheCorrectDialog(calEvent.start);
// change the border color just for fun
$(this).css('border-color', 'red');
},
editable: true,
events:data.concat(information)
});
resourceVacation = data;
});
});
$('table.calendar > tbody > tr > td:nth-child(-n+2)').addClass('fc-weekend');
});
Did you add style to the class in your css file?
You might also try this:
.fc-fri { color:blue; }
.fc-sat { color:red; }
(or .fc-sun for Sunday)
You can see the example here: http://jsfiddle.net/rajesh13yadav/nf9whojL/1/
In version 4 you can add an event for all Sundays or another days together using "daysOfWeek".
events: [
{
daysOfWeek: [0,6], //Sundays and saturdays
rendering:"background",
color: "#ff9f89",
overLap: false,
allDay: true
}]
I recommend that you use this method because you can easily change it with server-side scripting languages (like PHP, Node.js, JavaScript, etc.)
This worked for me:
.fc-sun {
color:#337ab7;
border-color: black;
background-color: #ffa58c; }
AJS.$(document).ready(function () {
AJS.$(".fc-weekend-column").each(function(i,el){
AJS.$(this).css("background-color", "#FFF7F7");
});
});
SOLUTION IN FULLCALENDAR VERSION 5:
Apply CSS style to the fc-day-sat and fc-day-sun class:
#calendar .fc-day-sun, #calendar .fc-day-sat {
background-color: #f4f5d7;
}
If you don't want to change the color of calendar header (which display the "Sat" and "Sun"), u can precisely apply the css for the fc-day-sat and fc-day-sun class by adding td tag:
#calendar td.fc-day-sun, #calendar td.fc-day-sat {
background-color: #f4f5d7;
}
In fullcalendar version 5
The css class for days has been changed as given below.
.fc-sun -> .fc-day-sun
.fc-mon -> .fc-day-mon
.fc-tue -> .fc-day-tue
.fc-wed -> .fc-day-wed
.fc-thu -> .fc-day-thu
.fc-fri -> .fc-day-fri
.fc-sat -> .fc-day-sat
So you can use like (For sunday)
.fc-day-sun {
background-color: red;
/*your styles goes here*/
}
Fullcalendar version 5:
.fc-sat and .fc-sun has been converted to .fc-day-sat and .fc-day-sun.
Also applying bgcolor to .fc-day-sat, .fc-day-sat will not work anymore, because they have applied bgcolor to .fc-non-business which is the deepest child class.
.fc .fc-non-business {
background-color: #fff;
}
A common class will do the job now.
If you want to remove the top layer of the weekend, use the following code
.fc-day-sat .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
display: none;
}
.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness{
display: block;
}
.fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-bg .fc-daygrid-bg-harness .fc-non-business{
display: none;
}
You can use this code after that:
Use this
In my GWT-Application I have a Custom-Table with a DatePicker-Column. Now I have to set the z-index for the Popup. I did this in my form with:
.dateBoxPopup {
z-index:5000;
}
Is there an equivalent for the Cell-Popup like .DatePickerCellPopup?
Are you refering to the DatePickerCell in the CellWidgets?
In case you are: The DatePickerCell uses a DatePicker and the DatePicker uses following CSS classes for styling (use Firebug to check them):
.gwt-DatePicker { }
.datePickerMonthSelector { the month selector widget }
.datePickerMonth { the month in the month selector widget }
.datePickerPreviousButton { the previous month button }
.datePickerNextButton { the next month button }
.datePickerDays { the portion of the picker that shows the days }
.datePickerWeekdayLabel { the label over weekdays }
.datePickerWeekendLabel { the label over weekends }
.datePickerDay { a single day }
.datePickerDayIsToday { today's date }
.datePickerDayIsWeekend { a weekend day }
.datePickerDayIsFiller { a day in another month }
.datePickerDayIsValue { the selected day }
.datePickerDayIsDisabled { a disabled day }
.datePickerDayIsHighlighted { the currently highlighted day }
.datePickerDayIsValueAndHighlighted { the highlighted day if it is also selected }
You have to specify these css classes with the #external tag to suppress selector obfuscation
Unfortunately .dateBoxPopup is not applied to the popup of DatePickerCell. Therefore, you need a z-index rule for .gwt-PopupPanel{ z-index: 15000 }