0

I have seen answers that are a bit similar to what I am looking for but none of them addresses my specific issue conclusively. For example this answer shows you how to change the background color of the snack-bar and it works. The issue it seems like that is all you can do in the css if you try to manipulate the width of the snack-bar nothing happens.

The other answer I saw: Overriding Default Style of SnackBar Component but for some reason it doesn't work.

So now my questions are:

How do I manipulate the look of a mat-snack-bar template using CSS? (Kindly show me how to:

  1. Make the width: 100%(when the screen is full size) and
  2. Make the snack-bar to appear at the top

using this example in stackbiz

Thank you.

YulePale
  • 6,688
  • 16
  • 46
  • 95

2 Answers2

2

you can do that quite simply by using CSS. All you gotta do is add to the CSS file in which you define the class (for example blue-snackbar) the following:

.blue-snackbar {
  background: #2196F3;
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  max-width: 100% !important;
  width: 100%;
}

I'll go over what it does:

  position: absolute; 
  top: 0;
  left: 0;
  right: 0;

Those lines make sure the snackbar is on the top (hence "top: 0") and stretches to the entire available space ("position: absolute" allows this game of placement)

  max-width: 100% !important;
  width: 100%;

Max width allows the div to take the entire width of the page, and width instructs it to. The "!important" instruction is used to bypass any conflicting CSS from other styles.

Shoham Ben Shitrit
  • 140
  • 2
  • 11
  • Thank You. This worked. Earlier on I was only adding the width properties. I although intend it to use it inside a container and make its width the same as the container's. With this answer I am sure I'll figure that out. – YulePale Dec 23 '18 at 11:22
2

to overrides mat style you should put yours css classes in the style.css file, otherwise it's will do nothing

another way is to change the ViewEncapsulation Mode

please look at Diff between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated

RikiF
  • 355
  • 1
  • 6
  • thank you. I was already doing this but to manipulate the width you have to put the css properties in full as shown in the accepted answer. Only then does it work. – YulePale Dec 23 '18 at 11:26