2017-10-24 21 views
0

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; 
} 
+0

Haben Sie versucht, hinzuzufügen, wichtig? Könnte es funktionieren lassen. –

+0

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

+0

Würde helfen, wenn ich den Code in einer Geige oder einem Link oder etwas sehen kann! –

Antwort

1

Ich bin nicht positiv, was styleclass = "col-Taste" der Fall ist, so dass ich könnte falsch sein, aber Blick auf die Dokumentation I glaube nicht, dass es diese Klasse auf den td bringt.

Hier ist, was ich versuchen würde zuerst:

<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> 

Die CSS:

.my-center-text { 
    text-align: center; 
    width: 100%; 
} 

Wenn das nicht funktioniert, könnte eine Art von tief Auswahl tun müssen. Ich weiß, Angular in einem Zustand des Flusses ist aber so etwas wie dies für jetzt funktionieren könnte:

#deleteColumn /deep/ td { 
    text-align: center; 
} 

Da Angular Stile in einer Komponente von einem anderen betroffenen verhindert, Sie nicht direkt Zugriff auf die td innerhalb der p bekommen -Komponente standardmäßig. Durch Hinzufügen des/deep/zum Selector-Pfad werden die Styles auch auf verschachtelte Komponenten angewendet.

+0

".my-center-text" hat funktioniert! Vielen Dank für die freundliche Fremde! – azulBonnet

+0

jederzeit, viel Glück bei Ihren Abenteuern! – bgraham

Verwandte Themen