I'm using a custom css class called 'td-group' to customize td with a rowspan, to be more specific [attr.rowspan] since i'm using angular. In short words, the css style doesn't always get applied correctly, i've looked everywhere and tried everything and still didn't figure it out
The bug only occurs on chrome and never in edge
Here the image of the bug
<tr *ngFor="let r of list; let i = index">
<ng-container *ngIf="group && r.representative.show">
<td class="td-group" [attr.rowspan]="r.representative.height">
{{r.representative.name}}
</td>
</ng-container>
<td *ngFor="let c of cols">
{{r[c.name]}}
</td>
</tr>
Stackblitz https://stackblitz.com/edit/angular-yr3pxq?file=src/app/app.component.html
Related
STACKBLITZ DEMO
I have a material table as following:
<table mat-table [dataSource]="dataSource" >
... Rows ...
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #MatPaginator [pageSizeOptions]="[4]" showFirstLastButtons></mat-paginator>
I need the table to be hidden when the variable info is false.
Attempt 1:
<table *ngIf="info" mat-table [dataSource]="dataSource" >
It works fine but the pagination does not work when info is true and all rows are displayed on the first page.
Attempt 2:
<table [hidden]="!info" mat-table [dataSource]="dataSource" >
Makes the pagination work, but when info is false the table is still displayed with no results.
Attempt 3:
Tried to sourround the whole table with a div and apply *ngIf to the div. Result: Same problem as in first attempt.
Tried to apply [hidden] to the div but still not hidding.
EDIT: Attempt 4:
Applied directly to the envolving div css style="display:none" and getting the same result as in attempt 3, the table is shown even if it has no values.
Any idea on how to hide the table when info is false and show it
when info is true with a working pagination?
Thanks!
Use this way
[hidden]="true"
<div [hidden]="true" >
<table mat-table [dataSource]="dataSource" >
<ng-container matColumnDef="test">
<th mat-header-cell *matHeaderCellDef> Test. </th>
<td mat-cell *matCellDef="let exp"> {{exp}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #MatPaginator [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons>
</mat-paginator>
<div>
stackblitz demo
make sure to change your condition in [hidden]
you can use ngClass to add dynamic class and use that class to hide the table like
[ngClass]="{'hidden': !info}"
and in your style.css
.hidden{
display:none;
}
demo
You can't put the paginator inside a ngIf, otherwise, when you set this.dataSource.paginator = this.paginator, this.paginator is undefined. There is a solution if you REALLY want to ngIf it (tell me if it is realy necessary), but I recommend changing it to hidden instead.
Angular 8 solution:
[hidden] can be used instead of *ngIf and activation of the tab can be done using CSS properties.
.tableClass .mat-tab-group.mat-primary .mat-ink-bar {
width: 160px !important;
}
<div [hidden]="true" class="tableClass">
<mat-tab-group>
<mat-tab label="Tab1">
</mat-tab>
<mat-tab label="Tab2">
</mat-tab>
</mat-tab-group>
</div>
I had the same problem because I was using the *ngIf and async pipe in my template and pagination was not working. After some research I was able to make it work using the #ViewChild annotation and a set function so I decided to share my complete solution here :)
The hidden solution propose by other answers didn't work for me.
In my component.ts file:
constructor(private cdRef: ChangeDetectorRef) { }
private paginator: MatPaginator;
/*
We are using #ViewChild because of the ngIf with async pipe on the template
When the data is emmited for the first time from the observable, we need to bind the
pagination component with the datasource. This can be achieved with the code bellow.
*/
#ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
if(mp) {
this.paginator = mp;
this.dataSource = new MatTableDataSource<any>(your_data);
this.dataSource.paginator = this.paginator;
this.cdRef.detectChanges();
}
}
and in my template file:
// my observable with the async pipe
<div *ngIf="raceList$ | async as races">
<div class="mat-table-width">
<table mat-table [dataSource]="dataSource">
...
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 30]"
showFirstLastButtons
aria-label="select page of races">
</mat-paginator>
</div>
</div>
With this solution I was able to display the data in the table and make pagination work.
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
Hi I want to make a row in a table inactive. Even if it is easy to hack by myself and add a custom css with the same colour of the inactive elements of my current theme I think it can be handles by bootstrap itself.
Any suggestions?
Bootstrap has a few elements you might find helpful:
Use contextual classes to change row colors:
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
http://getbootstrap.com/css/#tables-contextual-classes
Use contextual colors to change the color of text:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
http://getbootstrap.com/css/#helper-classes-colors
The disabled element is primary for form elements and buttons. Check that out here,
I've created a custom class table-inactive:
.table-inactive td {
background-color: #ececec;
color: #b9b9b9;
}
Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..
I.E.
<tr>
<td style="color:grey;">Sample Text</td>
<td><input type="text" disabled/></td>
</tr>
I have worked with Twitter Bootstrap a bit and did not see any of these features though.
Bootstrap 4 requires you to add "table-" to the class.
<tr class="table-danger">...</tr>
https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes
After upgrading to bootstrap 3 generating a popover on table rows has an unexpected hovering effect on the table row. Popovers don't behave correctly on table rows using table-striped style. Removal of the table-striped style is one fix but you lose that effect. Only tested in Chrome. The last working version was 2.1.1.
Bootstrap 2.2.2: http://jsfiddle.net/tomshaw/9N4fs/
Is there a way to give the popover a container to stop this effect? Or some similar technique?
<table class="table table-striped">
<thead>
<tr>
<th>Module</th>
<th>Controller</th>
<th>Action</th>
<th>Recorded</th>
</tr>
</thead>
<tbody>
<tr id="popover" data-content="Content One" title="System Information">
<td>Utilities</td>
<td>Transaction</td>
<td>Export</td>
<td>2012-12-26 11:58:10</td>
</tr>
<tr id="popover" data-content="Content Two" title="System Information">
<td>Utilities</td>
<td>Reports</td>
<td>Edit</td>
<td>2012-12-26 12:47:30</td>
</tr>
<tr id="popover" data-content="Content Three" title="System Information">
<td>Utilities</td>
<td>User</td>
<td>Edit</td>
<td>2012-12-26 12:48:27</td>
</tr>
</tbody>
</table>
// Weird table row table-striped hover effect. Broken in bootstrap
// 2.2.2 working in 2.1.1 Using selector option has same effect.
$('body').popover({placement:"top",trigger:"hover",selector:'tr[id=popover]'});
table {
margin:50px 5px 0 5px;
}
I'm not sure what behavior you are going for. When I removed the table-striped the behavior of the pop-up was the exact same. Also you are using mutliple ID tags with the same name in your tr s. I updated your example to fix a few of these things and I rearranged the popup to an area where I assumed that you wanted it. Let me know if that helps and please remember not to use multiple id's with the same name.
Here is what I did to move the popover:
Added:
.popover{
left: 0px !important;
}
Here is a working fiddle make sure you look at the changes in the HTML and the JS:
http://jsfiddle.net/9N4fs/30/
I need to apply style to last cell of last row of class "fose_table_row".
Table is next
<table class="fose_table">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr class="fose_table_row">
<td>3</td>
<td>4</td>
</tr>
<tr class="fose_edit_row">
<td colspan="4">56</td>
</tr>
<tr class="fose_table_row">
<td>7</td>
<td>8</td>
</tr>
<tr class="fose_edit_row">
<td colspan="4">90</td>
</tr>
</table>
Rows of class fose_edit_row are not visible rows so I need last of fose_table_row to be styled.
I tried .fose_table .fose_table_row:last-child td:last-child and .fose_table tr.fose_table_row:last-child td:last-child but that doesn't seem to work. Last or of class fose_edit_row gets styled. What is right way to do this? And is it even possible?
W3C :last-child
The :last-child pseudo-class represents an element that is the last child of some other element.
:last-child will get the last element of its parent and then it will apply style if it has class .fose_table_row. So CSS can't solve your problem.
A possible jQuery solution:
$('table.fose_table').find('tr.fose_table_row').eq(-1).addClass('extra-style');
DEMO
The only way, currently, to solve your problem (as I noted in the comments) is to use JavaScript. Using plain JavaScript, rather than a library, I'd suggest:
var foseTableRows = document.querySelectorAll('.fose_table_row'),
last = foseTableRows[foseTableRows.length - 1];
console.log(last);
last.classList.add('lastFoseTableRow');
JS Fiddle demo.
Coupled with CSS, to apply the specific styles in order that they're reusable elsewhere without manipulating the style property of the specific nodes/elements.