0

I have an Angular Material Card. The header is vertical on the left side and the content is on the right side.

Since I updated my Angular version and the Angular Material library to 16, the header and content are displayed on top of each other.

HTML:

<mat-card>
    <mat-card-header>
        Vertical Title
    </mat-card-header>
    <mat-card-content>
        <p>
            Lorem ipsum ...
        </p>
    </mat-card-content>
</mat-card>

CSS:

mat-card {
    width: 50%;
    display: flex;
}

mat-card-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    text-align: center;
}

mat-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

The changelog shows that some changes have been made to the mat-card. Is there another way to display the elements side by side?

StackBlitz: https://stackblitz.com/edit/qppvij

sQeeZ212
  • 1
  • 2
  • Could you provide a picture in order to better understand? – Wandrille May 12 '23 at 07:51
  • Better than a picture would be a stackblitz. – Jacopo Sciampi May 12 '23 at 07:55
  • I have added a picture. Unfortunately I don't have a picture from the previous state, but the 'vertical title' should be to the left of the text. – sQeeZ212 May 12 '23 at 07:55
  • By the text, I guess if it's the `mat-card-content`. What is the custom style that you were applying before? Could you add it to your post ? – Wandrille May 12 '23 at 07:58
  • 1
    I added a stackblitz, this apparently runs on an older Angular version, so as it is there it should look. I didn't change anything on the styling, just updated the angular version. The full css code is in the post or in the stackblitz. – sQeeZ212 May 12 '23 at 08:04
  • Did you upgrade from version 14 or version 15? – JSON Derulo May 12 '23 at 08:06
  • I changed the version from latest 15 to 16.0.1. – sQeeZ212 May 12 '23 at 08:08
  • from your example, if we update the packages (with 16.0.1), it's working as expected https://stackblitz.com/edit/angular-kh4ckl?file=package.json – Wandrille May 12 '23 at 08:09
  • The Stackblitz is not properly set up, Angular Material is not even installed. You can take the [examples from the docs](https://material.angular.io/components/card/examples) as a base for your reproduction. (Choose the example which is closest to your use case and click the "Share" button) – JSON Derulo May 12 '23 at 08:10
  • 1
    Thanks JSON Derulo, now the stackblitz works. The new one is now with angular 16.0.1 and there my problem occurs. – sQeeZ212 May 12 '23 at 08:21

1 Answers1

0

I have found a workaround. Instead of custom styling you can use a "mat-card-title-group" in which elements like "mat-card-header", "mat-card-title" or "mat-card-subtitle" can be grouped.

A usual html element such as a paragraph or image is automatically placed next to the title within the title-group.

HTML:

<mat-card>
    <mat-card-title-group>
        <mat-card-title>
            Vertical Title
        </mat-card-title>
        <p>
            Lorem ipsum ...
        </p>
    </mat-card-title-group>
</mat-card>
sQeeZ212
  • 1
  • 2