0

I am trying to use this code - see this link angular stackblitz link

I am using angular 15. When I download the code and run it locally it is displayed vertically Any ideas what I need to do to style the component horizontally. Is there a reason it is behaving differently in angular 15?

(Flex is being used for the layout)

This is a screenshot of what I am getting with the same code. It should display horizontally but no matter what changes I make to the style sheet it won't

enter image description here

JTR
  • 81
  • 1
  • 6
  • Must be a css issue. Would be useful to see where and what you put as css for the component. – Misha Mashina May 02 '23 at 13:10
  • I created a scss file for the component and put exactly the same scss file contents that is in the stackblitz demo styles.scss. When I edit this file it does change the style of the component but I can't for the life of me figure out why it will not display horizontally locally. – JTR May 02 '23 at 13:30
  • have you added the stylesheet to the component attribute styles array? – heaxyh May 02 '23 at 13:33

2 Answers2

0

You need to import styles.css to your angular.json add styles.css to the stylesection. Also wanted to mention that since angular 6 angular-cli.json is deprecated.

heaxyh
  • 573
  • 6
  • 20
  • I have added the src/styles.scss to the styles array like this "styles": [ "@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], – JTR May 02 '23 at 14:17
  • What happens if you break the viewEncasulation? – heaxyh May 02 '23 at 14:19
  • Tried the different options available (none, ShadowDom & Emulated ) but only the angular material icons are being removed. No change to it being displayed vertically. I just can't get my head around this. it should be simpler I feel – JTR May 02 '23 at 14:35
  • I think I finally got your problem. Do this to your component stylesheet: `:host { width: 100% }` – heaxyh May 02 '23 at 14:48
  • made no difference unfortunately! – JTR May 02 '23 at 14:59
  • presume I would be asking a lot but if you pull the demo code locally to a local project do you get the same problem? – JTR May 02 '23 at 15:00
0

Ok got it working but I had to explicitly state the class "mat-card-content" as a class attribute of in the html.

Why do I need to set it explicitly. Has something changed in angular material that would make this a requirement? Just looking to better understand what is going on under the hood so I can avoid this kind of problem in the future.

JTR
  • 81
  • 1
  • 6