I am trying to use PrimeNg and bootstrap together. Maybe this inherently bad? Just seems that PrimeNg alone is not sufficient.
I'm trying to have a button centered in a column as shown in their documentation: https://www.primefaces.org/primeng/#/datatable/templating For me however, it is always left aligned.
index.html
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" href="/node_modules/primeng/resources/primeng.min.css" />
foo.component.html
<p-dataTable [value]="mixData" [editable]="true" sortField="mixType" id="MixTypeTable">
<p-column id="deleteColumn" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body" >
<a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
</ng-template>
</p-column>
</p-dataTable>
foo.component.ts
@Component({
selector: 'qtyPane',
templateUrl: './app/register/foo.component.html',
styleUrls: ['./app/register/foo.component.css'],
providers: []
})
In my foo.component.css, it seems like no selector for the td with the button has any effect. Other styles work on other elements in foo.component.html so I know the css is being reached but does not work at all on the table.
foo.component.css, I tried all of these:
#deleteColumn td {
text-align: center;
}
table > tbody > td.col-button {
text-align: center;
}
.col-button {
width: 10%;
text-align: center;
}
td.col-button {
text-align: center;
}
I'm not positive what styleClass="col-button" does, so I might be wrong, but looking at the documentation I don't think it puts that class on the td.
Here's what I would try first:
<p-column id="deleteColumn" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body" >
<div class="my-center-text">
<a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
</div>
</ng-template>
</p-column>
The CSS:
.my-center-text {
text-align: center;
width: 100%;
}
If that doesn't work you might need to do some kind of deep selecting. I know Angular is in a state of flux but something like this might work for now:
#deleteColumn /deep/ td {
text-align: center;
}
Because Angular prevents styles in one component from affected another, you can't directly get access to the td inside of the p-component by default. By adding the /deep/ to the selector path it will apply the styles to nested components as well