6
Wie kann ich den Header von NG-Grid neu formatieren? Wie kann ich insbesondere die Hintergrundfarbe und die Textfarbe der Kopfzeile ändern?angularjs ng-grid: Wie ändert man den Header-Stil
A
Antwort
5
können Sie überschreiben die background-color Eigenschaft auf der .ngHeaderCell Klasse im ng-grid.css erklärt die Hintergrundfarbe, die Sie auf den Header-Zellen verwenden möchten.
Wenn Sie nicht die Original-ng-Grid CSS ändern möchten, können Sie Ihre eigenen CSS und laden Sie es nach ng-Grids CSS erstellen, in dem Sie die gleiche .ngHeaderCell Klasse mit später overide können:
.ngHeaderCell {
background-color: [your background color] !important;
bottom: 0;
color: [your foreground color] !important;
position: absolute;
top: 0;
}
+0
Danke! Mein Fehler, ich konnte nicht herausfinden, welche CSS-Klasse geändert werden sollte. Und ich habe versucht, mit headerCellTemplate herumzuspielen. Das hat perfekt funktioniert. – klode
+1
Gern geschehen. Firebug und seine Entsprechungen sind immer in diesen Fällen nützlich. Sie können ein Element überprüfen, das Sie überprüfen möchten, und es gibt ein Panel, in dem Firebug Ihnen zeigt, welche CSS-Regeln auf dieses Element angewendet werden und woher diese Regeln stammen. –
+0
Ich überholte schließlich die 'Hintergrundfarbe' in der' .ngTopPanel' Klasse – klode
2
Ich habe noch nicht in ng-Grid geschaut, aber sieht aus wie eine CSS-Datei zum Stylen zur Verfügung gestellt wird? Ich würde empfehlen, entweder die tatsächliche CSS-Datei zu ändern, oder diese Änderungen überschreiben, indem Sie Ihre eigenen unten deklarieren, wo die grid.css deklariert ist. Überprüfen Sie den Link, wenn Sie darüber sprechen.
https://github.com/angular-ui/ng-grid/blob/master/ng-grid.css
Zum Beispiel, einer der CSS in dem obigen Dateiattribut ist unten, einfach ein ctrl-f und finden Sie die Attribute, die Sie ändern suchen zu.
.ngHeaderCell {
position: absolute;
top: 0;
bottom: 0;
background-color: inherit;
}
Verwandte Themen
- 1. AngularJS ngGrid-Textausrichtung
- 2. Wie ändert man den Wert nach der Verzögerung mit angularjs?
- 3. AngularJS - Wie man den Schlüsselwert anhand der Dropdown-Optionen ändert
- 4. ngGrid Multi Column Filtering
- 5. Wie ändert man den Schemanamen?
- 6. Wie man den Anwendungskontext ändert
- 7. Wie ändert man den ActiveXObject JS Konstruktor?
- 8. Highstocks - Wie man den Standard Zoom ändert
- 9. Wie ändert man den Inhaltstyp in PHP?
- 10. Wie ändert man den Raphael-Text?
- 11. Wie ändert man den Feldtyp in Ecto?
- 12. Taschenlampe - Wie ändert man den Tensortyp?
- 13. Wie man den Bildhintergrund zu Weiß ändert?
- 14. Wie ändert man den Buchstabenabstand in Swift?
- 15. Wie man den Header einer HttpUrlConnection ändert
- 16. Wie ändert man den ContentDialog-Übergang?
- 17. Wie man den Knopfcursor zur Hand ändert?
- 18. Wie ändert man den Hauptzweig in BitBucket?
- 19. Wie ändert man den Namen der tabcontrol
- 20. Wie ändert man den Standardkontext von jQuery?
- 21. Wie ändert man den Platzhalter in select2?
- 22. AngularJS - Wie ändert man die Reihenfolge der Divs?
- 23. Wie man die $ Fehlerwerte für Input-Tags manuell ändert - Angularjs
- 24. Wie erstelle ich eine nggrid benutzerdefinierte Fußzeile
- 25. Wie ändert man den Text auf den Schaltflächen der MessageBox?
- 26. Wie ändert man den Standardzustand, den der UI-Router benutzt?
- 27. Wie man den Vibrationsmodus über den Audiomanager prgrammatisch ändert
- 28. Wie ändert man den "src" Attributwert von ng-include in angularJS nach dem ersten Laden?
- 29. Wie ändert man Gruppen?
- 30. WIE man Vorschau ändert?
Darf ich fragen, warum die -1? – klode