Как изменить высоту строки таблицы материалов Angular?
В моем приложении Angular (в стиле Angular Material) мне нужно показать некоторые данные с помощью таблицы материалов.
Эта таблица имеет липкий заголовок, несколько строк и липкий нижний колонтитул.
По умолчанию строки имеют высоту 62,5 пикселя, и я хотел бы переопределить это значение.
Как я могу этого добиться?
Я безуспешно пытался переопределить стиль css для tr / tr.mat-row / tr.mat-header-row и т. д. Я тоже пробовал использовать ::ng-deep.
Кроме того, моя липкая строка нижнего колонтитула имеет высоту 48 пикселей, которую я не устанавливал! Кто-нибудь знает, что происходит?
Я могу редактировать строку нижнего колонтитула с помощью ::ng-deep, я установил вес шрифта на жирный, но когда я устанавливаю атрибут высоты, ничего не происходит.
::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}
Вы также можете указать это import { ViewEncapsulation } from '@angular/core'; // ... @Component({ // ... encapsulation: ViewEncapsulation.None, }) в своем компоненте, это переопределит стили!
Решение ViewEncapsulation состояло в том, чтобы переопределить очень специфический css, используя очень специфические селекторы css в 1) глобальном css или 2) создании отдельных файлов стилей для определенных представлений/стилей/элементов, импортируя их в каждый требуемый компонент (например, styleUrls: [material-table-override.css, component.css]).
Ответы 9
Вы можете указать высоту нижнего колонтитула таблицы в tr.mat-footer-row.
tr.mat-footer-row {
height: 100px;
}
Вот пример StackBlitz https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css
Попробуйте добавить его в свой файл styles.scss.
tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
height: #px !important;
}
Это работает! Я уже пробовал это, но я добавлял в стиль «:: ng-deep», и это не сработало. Без ::ng-deep это сработало.
Чтобы изменить высоту по умолчанию (48 пикселей) в мат-таблице, вам нужно указать класс для каждой строки в html, например, когда вы определяете строки:
<tr mat-row *matRowDef = "let row; columns: displayedCol;" class = "table-row"></tr>
Затем вы можете переопределить высоту, установив в своем основном файле css класс table-row с определенной высотой, например:
.table-row {
height: 30px !important;
}
Мы доказываем это с помощью angular 7 и angular material версии 7.3.7.
С уважением
Это работает правильно.
tr.mat-footer-row,
tr.mat-row {
border: 1px solid #e7e7e7;
font-weight: bold;
height: 20px !important;
}
В связи с этим у меня была проблема, когда мои строки мат-таблицы были слишком высокими, и я попытался установить высоту в CSS, чтобы уменьшить ее.
Оказалось, что проблема заключалась в том, что "min-height" была установлена на "mat-header-row" и "mat-row" где-то глубоко внутри материала (не в моем исходном коде).
Исправление было просто:
.mat-header-row, .mat-row {
min-height: 30px;
}
С материалом 5
mat-row.mat-row.ng-star-inserted
{ height: 32px !important; }
.mat-row{ min-height: 30px; }
Ответы правильные, но если это не работает для вас, это, вероятно, означает, что у вас есть div или любой элемент внутри таблицы, для которого установлена высота, и если эта высота больше, чем высота строки, вы не будете в состоянии переопределить его.
Вы также можете установить точное значение в элементе mat-row в шаблоне.
Использование minHeight лучше, чем height, потому что оно переопределяет css по умолчанию.
<mat-row
matRipple
*matRowDef = "let row; columns: columnNames"
routerLinkActive = "highlighted"
[style.minHeight.px] = "100">
</mat-row>
это работает для меня, работая с угловым ковриком 9. если бы я хотел иметь переменную высоту в зависимости от содержимого, что мне нужно изменить? Спасибо.
@OJVM, вы, вероятно, не против просто установить для высоты значение auto. Либо в вашем css, либо добавьте [style.height] = "'auto'" в этом примере. Если это не работает, убедитесь, что инструменты разработчика для строки показывают «авто» и заставьте вас скопировать ее точно так, как я здесь.
У меня была похожая проблема; в моем случае высота таблицы была слишком велика по отношению к количеству строк, поэтому установка высоты не работала. Когда я отрегулировал высоту, чтобы она была меньше, когда у меня было меньше строк, я смог снова установить высоту.
Попробуйте переопределить высоту с помощью флага
!important