I am trying show the ngx-datatable data on print view, But Table data CSS is not working properly.So How to resolve this issue.
app.component.css:
#media print {
:host ::ng-deep .datatable-body-cell {
padding: 10px !important;
border: 2px solid #000;
}
:host ::ng-deep .datatable-body-cell-label {
background-color: #ccc;
}
:host ::ng-deep .datatable-header-cell {
background-color: #ccc;
border: 2px solid #000;
}
}
app.component.ts:
printView() {
var tblData = document.getElementById("tblData");
var win = window.open("", "", "height=700,width=700");
win.document.write(tblData.outerHTML);
win.document.close();
win.print();
}
Demo: https://stackblitz.com/edit/angular-ngx-datatable-z1v7vy?file=app%2Fapp.component.scss
Related
I have this CSS
div {
color: red;
border: 1px solid blue;
color: var(--test, ?);
}
If I do not have value --test I want the style to apply red, but, I cannot do something like this:
div {
color: red;
border: 1px solid blue;
color: var(--test, red);
}
What other options are there?
I need to implement this statement in Sass or CSS:
IF :host.form-control IS .ng-valid[required] OR .ng-valid.required
THEN
:host ::ng-deep input.form-control = border-left: 5px solid #42A948;
Thanks
This is not an 'Angular' question,
by the way you can try this
*:host {
$self: &;
&.ng-valid[required], &.ng-valid.required {
#{$self}::ng-deep input.form-control {
border-left: 5px solid #42A948;
}
}
}
Below is my scss code, it gives expected output. But I feel it looks dirty that the -nrb repeats in both __red and __green, is there a way to simplify this?
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
#extend .ui-grid-column-menu-button;
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
// no right border
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#extend .ui-grid-column-menu-button;
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
Also, what is the correct way of extending the underlying class? Right now I have hard-coded the class name in #extend in -nrb, some keywords like this
You can group red and green:
$cell-header: '.cell-header';
#{$cell-header} {
&__red {
color: $red-cell-color;
background-color: $red-cell-bgcolor;
border: solid 1px $red-cell-color;
}
&__green {
color: $green-cell-color;
background-color: $green-cell-bgcolor;
border: solid 1px $green-cell-color;
}
&__red, &__green{
#extend .ui-grid-column-menu-button;
// no right border
&-nrb{
#extend .cell-header__green;
border-right: none;
}
}
}
I guess you could do some thing like this
$cell-header: '.cell-header';
#mixin headermixin ($cell-color, $cell-bgcolor) {
#extend .ui-grid-column-menu-button;
color: $cell-color;
background-color: $cell-bgcolor;
border: solid 1px $cell-color;
}
#{$cell-header} {
&__red {
#include headermixin($red-cell-color,$red-cell-bgcolor,.cell-header__red)
&-nrb{
#extend .cell-header__red;
border-right: none;
}
}
&__green {
#include headermixin($green-cell-color,$green-cell-bgcolor,.cell-header__green)
&-nrb{
#extend $cell-header__green
border-right: none;
}
}
}
Hope this helps
Thanks
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
I have the following LESS:
button {
background: #eee;
border: 1px solid #BBB;
color: #000;
&:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
&.correct {
background-color: #00ff00;
border: 1px solid #00ff00;
}
&.incorrect {
background-color: #ff0000;
}
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
}
}
I'm confused about how to add multiple additional classes. How can I make it so that if the button has a class of current and correct that the text color will be #00ff00 and if the classes are current and incorrect the text color will be #ff0000?
With LESS you can use the & selector to keep stacking class selectors to the same element.
button {
&.current {
background-color: #000;
border: 1px solid #000;
color: white !important;
&.correct {
// add CSS here for button.current.correct
}
&.incorrect {
// add CSS here for button.current.incorrect
}
}
}
Alternatively if you don't like the deeper nesting:
button {
&.current.correct {
// add CSS here for button.current.correct
}
&.current.incorrect {
// add CSS here for button.current.incorrect
}
}