I want to change background color of table row after selecting it. It works well for normal table. When i tried it to ng-table then only few styles are applied from ng-class not all styles are managed to apply including background color.
My [enter link description here][1].
[1]: http://plnkr.co/edit/O6PzlHXEhOyheNS8BbAT?p=preview
I am giving working example for it on above link,
here ng class work for making font bold of row content but not changing row's background.
Problem is not with ng-table. In fact problem is with class "table-striped" inside
"<table id="t1" ng-table="tableParams" show-filter="true" class="table table-condensed table-bordered table-striped">"
If you remove "table-striped", it works fine.
To go into the deep of how to override custom css over bootstrap css, you can follow below link. This link is very specific to this issue only.
custom css being overridden by bootstrap css
"https://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css"
Hope this helps.
Try to avoid $index in filtered lists. Try this instead:
<tr ng-repeat="user in userLocations" ng-class="{'selected':user.selected}" ng-dblclick="deselectAll(); user.selected = true;">
$scope.deselectAll = function(){
for(var i; i < userLocations.length i++;){
userLocations[i].selected = false;
}
}
Related
Is there a way to add a css class name to empty paragraphs in ckeditor so I can target them with css?
Empty paragraphs in ckeditor are not really empty because they contain a br tag so I can not use :empty to target them.
From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.
In the future, you might use a pure CSS solution like this one.
p:has(> br[data-cke-filler="true"]) {
/* styles here */
}
For now, you either have to style the directly.
Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.
br[data-cke-filler="true"] {
/* styles here */
}
And if you are able to run javascript in ckeditor. This can easely be done today.
Examples : with jQuery
$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );
or
$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );
Example : with Native Javascript
var brs = Document.querySelectorAll("br[data-cke-filler="true"]");
brs.forEach(function(br) {
br.classList.add("MyEmptyParagraphsClass");
});
In CKEditor 4, you can have a configuration file.
And you can add the custom config with the options here.
In your case, you might need these options :
config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.
Meanwhile in CKEditor 5, you can try these documentations about Block Widget :
Adding a css class to block elements
Inline and block content
I have an angular material dialog box that I wish to print out.
I have placed as explained here (Can I force a page break in HTML printing?) a page break div like so:
#media print {
.pagebreak { page-break-before: always; }
}
When I do this, the page break is ignored.
I have tested the printing by placing the exact same HTML on a different non-dialog page and it does indeed work as expected.
Is there a way to over-ride the dialog css when printing to allow the page break to work? I think it has something to do with box-sizing as can be seen by the answer of Yuri here: CSS Page-Break Not Working in all Browsers
As on https://developer.mozilla.org/en-US/docs/Web/CSS/break-before
For compatibility reasons, the legacy page-break-before property should be treated by browsers as an alias of break-before
page-break-before is a legacy property, try with break-before
I used page brake in angular component in below way. Apply the style page-brake-before:always inside div tag and this needs to be used inside a table tag. separate with the table tags whenever you want to brake the page.
Hopefully it helps!
app.component.html:
<button mat-icon-button class="float-right" tabindex="-1">
<mat-icon (click)="printROE()">print</mat-icon> </button>
app.component.ts:
printROE(): void {
const w = window.open();
let printHtml = '<html><head><style>.inner-text{font-family: "Open Sans", sans-serif;font-size: 10pt;text-align: justify;}' +
'</style></head><body style="position:relative;">';
printHtml += '<table width="100%" class="inner-text"><thead><title style="font-size:10pt;" align="center"></title></thead><tbody></tbody><tfoot></tfoot></table>';
reportHtml += '<table width="100%" class="inner-text"><tr><div style="page-break-before: always;"></td></tr> </div></tr></table>';
printHtml += reportHtml + '</body><footer></footer></html>';
w.document.write(printHtml);
w.document.close();
setTimeout(() => {
w.focus();
w.print();
w.close();
}, 900);
}
I am trying to add CSS when clicked on row or column of table, Following is code
private rowClicked(event: Event): void {
event.srcElement.setAttribute("class", "highlighted");
}
But it's not working as accepted. Am I doing in wrong way, Is there any alternate way to add CSS dynamically?
Note-
Is there any way to add CSS using dom element, my table has thousands of data and to create this table, I have used MetaWidget.
The easiest way to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.
Your new HTML template:
<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
> I'm a div that gets styled on click
</div>
Your rowClicked function:
highlightedDiv: number;
rowClicked(newValue: number) {
if (this.highlightedDiv === newValue) {
this.highlightedDiv = 0;
}
else {
this.highlightedDiv = newValue;
}
}
A working demo is here.
More can be found here.
You are using MetaWidget, but you are not mentioning what version you are using.
If you want work with Angular2 and MetaWidget, you should have use a compatible version of MetaWidget, which can be found here-
https://github.com/AmitsBizruntime/MetawidetA2
Using this library will be the best solution for you.
Re-
Angular does not work based on DOM, it works based on Component.
If you like to work on DOM, then you should include jQuery in tour angular project from here-
How to use jQuery with Angular2?
But it is not a good practice.
I want to build an Edit popup dialog with an input form in Angular2 using the PrimeNG widgets. I run into trouble with dynamic content of that dialog box (see screenshot).
I've naïvely been trying to wrap the CalendarModule in a div that is positioned above the other elements. (see Angular Template HTML below)
<p-dialog [(visible)]="display" [modal]="true" [resizable]="false">
...
<table class="ui-datatable-responsive">
<tbody>
<tr>
...
</tr>
<tr>
<td class="ui-cell-data">Start By:</td>
<td class="ui-cell-data">
<div [style]="generateSafeStyle('position:relative; z-index:1000')">
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"></p-calendar>
</div>
</td>
</tr>
</tbody>
...
</table>
</p-dialog>
However it seems the DialogModule frames all its content. Is there a hack to overflow that frame?
How would you handle that?
Thank you.
P.S: The generateSafeStyle Function just uses an injected DomSanitizer and works fine.
generateSafeStyle(style:string):SafeStyle{
return this.sanitizer.bypassSecurityTrustStyle(style);
}
just use appendTo="body", it will show calendar above all, even if it is in table, popup or scroll panel
<p-calendar [(ngModel)]="invariable.value" dateFormat="mm/dd/yy" required appendTo="body" readonly></p-calendar>
So I would guess things have changed since this was originally asked, but I found that if I added
[contentStyle]="{'overflow': 'visible'}"
to the p-dialog it allowed the calendar popup to overflow the dialog border.
The only thing that worked so far were the following style options:
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="dueDate" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}">
This however smashed up the table. So I got rid of the table and used flexboxes to align the elements. Looks better anyway like this.
It's related to overflow:auto on .ui-dialog-content
In dialog there is a div with class .ui-dialog-content make overflow:visible in that div and it will fix this problem.
If you check official PrimeNG Calendar documentation, you will find list of attributes for calendar component, among them there's style attribute which you can use to add needed CSS:
<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"
[style]="{ 'position': 'relative', 'z-index': '1000' }"></p-calendar>
I found a better solution for this. Just add a method on click listeners and select element ui date picker
(click)="modifyStyle()"
In ts file import elementRef and Renderer2
constructor(private ele: ElementRef, private ren: Renderer2)
{}
modifyStyle()
{
let ui = this.ele.nativeElement.querySelector(".ui-datepicker");
if(ui)
this.ren.setStyle(ui, "top", "unset")
}
That's it.
Newbie question, I'm working on a simple scenario: Changing the background color and the text of a giving element on my page using Tritium. My page looks like this:
<div class="hero" id="hero">
<div id="heroContentShort">
<div class="heroContentShort">
<h1 style="text-transform:capitalize;">My Text<span style="text-decoration:underline;font-weight:bold;">- on Moovweb</span></h1>
</div>
</div>
On my .TS file I have the following:
insert("div", class:"cus_title"){
insert("div", class:"cus_row1"){
move_here("//div[#id='hero']/div/div/h1")
attribute("background", "red")
text("My New Text")
}
}
The above is successfully changing the text, although is not preserving any format nor is changing the background color to red.
What I'm doing wrong?
Thanks
First and foremost, I highly recommend you not do the coloring in tritium. The DOM and the style should be separate. I would recommend you put this at the bottom of your main.scss file if you do not want to create your own page. Then you would do:
.cus_row1 {
background-color: red;
}
That would get the background color to work perfectly, and correctly.
However, if (for some reason) you HAD to do this in tritium, I would instead do this:
insert("div", class:"cus_title"){
insert("div", class:"cus_row1"){
move_here("//div[#id='hero']/div/div/h1")
attribute("style", "background-color: red")
text("My New Text")
}
}
The first reason, is that the background attribute is deprecated. Second, the user agent stylesheet can overwrite it. I hope this works for you!