материал 11 - невозможно выровнять по правому краю 2 из 5 столбцов mat-header-cell при применении mat-sort-header

#css #angular

#css #угловой

Вопрос:

введите описание изображения здесь я использую Angular material 11. При определении заголовка каждого столбца с помощью *matHeaderCellDef с помощью mat-header-cell и при применении mat-sort-header я нахожусь в ситуации, когда я не могу применить желаемый стиль. Я могу выровнять содержимое ячеек под заголовками, применив align=»right». Однако это не только запрещено для заголовка, но и кажется, что добавление класса css для предоставления каких-либо настроек не выполняется должным образом при применении mat-sort-header . Похоже, что mat-sort-header в конечном итоге создает дочерний элемент со встроенным стилем, который переопределяет любой класс css, применяемый выше.

Я пробовал много вещей, включая другие сообщения, которые вдохновляли идеи. Однако нигде не видел этой точной проблемы.

У меня есть 2 столбца: «вес» и «значения», которые я пытаюсь выровнять по правому краю заголовков столбцов.

StackBlitz

Я ценю любую помощь в этом. Спасибо

Ответ №1:

Вы можете сделать свой заголовок правильным, используя приведенный ниже стиль

 :host ::ng-deep .headerRight .mat-sort-header-content {
  justify-content: flex-end !important;
  width: 100% !important;
}

1. спасибо за совет. Я только что попытался обновить stackblitz, используя тот же стиль, однако он не внес изменений.

2. Я вижу, что здесь он выровнен по правому краю. Я только что удалил закомментированный код. stackblitz.com/edit /…

3. Хм. Я проверил firefox, chrome, safari, edge… единственная часть, которая выровнена по правому краю, — это ячейки. Заголовки столбцов по-прежнему выровнены по левому краю. Какой браузер вы используете? (Я добавил изображение в верхней части того, что я вижу)

4. Я использую Chrome и пытаюсь увидеть этот вывод в полноэкранном режиме. Оставшееся в конце место предназначено для значка сортировки. Проверьте stackblitz, которым я поделился выше

5. спасибо вам за это. Я пробовал даже ваш stackblitz (в полноэкранном режиме), и во всех браузерах заголовки «Вес» и «Значения» по-прежнему не выровнены по правому краю. Они не совпадают с содержимым в столбцах под этими заголовками. Содержимое столбцов выровнено по правому краю.