Ich versuche PrimeNg und Bootstrap zusammen zu verwenden. Vielleicht ist das von Natur aus schlecht? Scheint nur, dass PrimeNg allein nicht ausreicht.Kann Text nicht zentrieren mit PrimeNg DataTable
Ich versuche, eine Schaltfläche in einer Spalte zentriert zu haben, wie in ihrer Dokumentation gezeigt: https://www.primefaces.org/primeng/#/datatable/templating Für mich jedoch ist es immer linksbündig.
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 meinem foo.component.css, scheint es wie kein Selektor für die td mit der Taste hat keine Wirkung. Andere Stile arbeiten an anderen Elementen in foo.component.html, so dass ich weiß, dass die CSS erreicht wird, aber überhaupt nicht auf der Tabelle funktioniert.
foo.component.css, habe ich versucht, alle diese:
#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;
}
Haben Sie versucht, hinzuzufügen, wichtig? Könnte es funktionieren lassen. –
Danke @AladinBenSassi, ich denke, es ist nicht so, dass die Stile überschrieben werden. Ich denke, dass meine Selektoren nicht mit dem HTML leben. Wenn ich nach den angewandten Stilen sehe, erscheinen sie überhaupt nicht. – azulBonnet
Würde helfen, wenn ich den Code in einer Geige oder einem Link oder etwas sehen kann! –