Editing ngx-datatable styling issues - angular

I'm following the themeing setup for ngx-datatable.
First I npm installed ngx-datatable 10.4.0 since this is compatible with Angular 4 and an earlier version of rxjs.
My problem is with the styling of the table.
My template file looks like this:
<div>
<ngx-datatable
[rows]="rows"
[columns]="columns"
[columnMode]="'standard'"
class="material"
fixed-header
[headerHeight]="50"
[scrollbarV]="true">
</ngx-datatable>
</div>
Inside of my scss file:
#import '~#swimlane/ngx-datatable/release/index.css';
#import '~#swimlane/ngx-datatable/release/themes/material.css';
#import '~#swimlane/ngx-datatable/release/themes/bootstrap.css';
#import '~#swimlane/ngx-datatable/release/assets/icons.css';
And I can confirm that the material styling works to a certain extent:
I wish to add a border-bottom under my header, but to no avail.
If you check the demo: http://swimlane.github.io/ngx-datatable/#filter
There is always a border-bottom for the sample tables.
How do I configure the table to insert a border-bottom beneath the header?
Is there a problem with my ngx-datatable setup?

Related

Ngx-datatable cellClass not working

I try to append my custom css to ngx-datatable cell.
<ngx-datatable-column
*ngFor="let column of tableOptions.columnDefs"
[cellClass]="'my-custom-cell'"
...
Css for my-custom-cell :
.my-custom-cell{
padding: 0;
}
In dev tools I can see datatable-body-cell has classes
class="datatable-body-cell my-custom-cell sort-active"
Problem is that no css is overridden
Probably you're facing an issue about View Encapsulation.
ngx-datatable uses ViewEncapsulation.None on it's styling. You can add your .my-custom-cell style definition to ./src/styles.(s)css or you can also set your component's encapsulation to None.
You can check details of view encapsulation from angular guide if you don't know about it already.
Edit (response for Tom's comment)
I also don't want such a solution but unfortunately it seems this is the way...
I've prepared a demo app which shows what I'm trying to tell.
.my-custom-cell assigned to name column.
.my-custom-cell-global assigned to gender column.
./app/demo-component.ts
<ngx-datatable-column name="name" [cellClass]="'my-custom-cell'">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="gender" [cellClass]="'my-custom-cell-global'">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
./app/demo-component.scss
.my-custom-cell {
background: red;
}
./styles.scss
.my-custom-cell-global {
background: #e6f2ff;
}
As you can see red background is not assigned to name column. But gender column gets blue background color.
That's because view encapsulation tells the cli to compile the .my-custom-cell class as shown as below:
.my-custom-cell[_ngcontent-c176]{background:red}
But DatatableComponent is using ViewEncapsulation.None. If you inspect one of the cells in name column then you can see that datatable-body-cell which has .my-custom-cell class, doesn't have
[_ngcontent-c176] attribute. So the class is not applied.
If you uncomment encapsulation line:46 then you'll see that [_ngcontent-c176] attribute has gone from compiled .my-custom-cell, and name column gets the style successfully.
Let me know if you find another suitable way.

create a directive to dynamically add toolbar and button to kendo ui grid Angular2

I'm looking to create a directive to dynamically add a toolbar and/or button to a kendo ui grid (angular2).
I want to do something like
<kendo-grid [data]="mydata" [add-command]="myaddcommand"></kendo-grid>
but also work for
<kendo-grid [data]="mydata" [add-command]="myaddcommand"
[remove-command]="myremovecommand">
</kendo-grid>
and both would generate the necessary
<div kendoGridToolbarTemplate>
<button (click)="myaddcommand">Add</button>
<!-- when [remove-command] is present: -->
<button (click)="myremovecommand">Remove</button>
</div>
I had some code that sort of worked but I don't know what happened to it but also it seemed to have issued with onDestroy() when used with the <kendo-tabstrip>
Any help would be greatly appreciated! Thanks!
kendo grid documentation and toolbar example here:
http://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

mat-form-field always show under other elements in Angular Material

im struggling very much with the implementation of materials mat-form-field inside a mat-card. I've created a complete new solution to demonstrate my problem. For example, i'm trying to add two mat-cards. One above the other. The first card has a mat-form-field inside and the other a image for example. That works fine. But when i click on the mat-form-field, the selection options are shown at the bottom of the page in full size. Here is the simplest implementation. tested on firefox and chrome.
<div fxFlex=25%>
<mat-card>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option </mat-option>
</mat-select>
</mat-form-field>
</mat-card>
<mat-card>
<img mat-card-image src="http://images.all-free-download.com/images/graphiclarge/harry_potter_icon_6825007.jpg">
</mat-card>
</div>
I've tried different things like:
css styling, fxLayout="column", fxFill, put the i div containers and so on. And yes my BrowserAnimationsModule is loaded. They are also no errors.
Alright, i've found the solution! You have to add a prebuild-theme into your styles.css file!
I've added this code to my global styles.css
#import "../node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css";

primeng DataTable Header

I am simply trying to Bold the column header in my table and it is taking far longer than I would like. I've tried to override the ui-datatable-header and other attributes with no luck. Now I am trying to use a template to do it.
<p-column field="noticeType" [sortable]="true" [filter]="true" [style]="
{'overflow':'visible', 'font-weight':'bold'}" filterPlaceholder="Search">
<ng-template pTemplate="header">
<th [style]="{'font-weight': '600'}">Notice Type</th>
</ng-template>
The "Notice Type" label shows up with no problem but no styling is changed. I've also tried just using the css file for the component to style the "th" with no luck. Anyone have any ideas?
Did you try overriding the class ui-column-title or .ui-datatable .ui-datatable-thead>tr>th Overriding either with a font-weight:900 works for me.

Angular2 Material2 <md-spinner> not showing but is working

My assumption is that my css is not correct, but alas I cannot figure this out.
<div *ngIf="loading">
<md-progress-circle mode="indeterminate" color="warn">Loading...</md-progress-circle>
</div>
<md-list>
<md-list-item *ngFor="let incident of incidents">
<h3 md-line> {{name}} </h3>
<p md-line>
<span>{{date}} > </span>
<span>{{text}}</span>
</p>
</md-list-item>
</md-list>
You need to make sure you're using a theme for #angular/material.
From the getting started guide:
Include the core and theme styles:
This is required to apply all of the core and theme styles to your
application. You can either use a pre-built theme, or define your own
custom theme.
See the theming guide for instructions.
I've found using #angular/material without a theme to work only some of the time. Text inputs work but radiobuttons, checkboxes - and it appears the spinners - require a theme to work properly.
As noted in the quote, you can either use one of the provided themes (there's currently 6 provided) or create your own. The provided themes can be included in your css using #import('~#angular/material/core/theming/prebuilt/<theme>.css').
Change:
[color]="'warn'"
[mode]="'indeterminate'"
Use square brackets for binding.
As you are assigning strings directly you have to use " and '
Add this line to your index.html header
<link href="https://unpkg.com/#angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
In my case, I had a font-awesome spinner, and it was working but not visible because the FontAwesome css file hadn't fully loaded yet. The solution was to use npm angular2-fontawesome rather than to link the css file in index.html.
For me fixing this properties helps
/deep/ .mat-progress-spinner circle, /deep/ .mat-spinner circle {
stroke: white;
}
where white is your visible color of spinner

Resources