Style Snackbar Overlay

[ricardosaracino]

Question

with the update from v11 to v12 we lost the ability to set a max width on the snack bar

if i change the overlay styles it is applied globally and effects modals and toasts. Is there a way to achieve this in v12

• igniteui-angular version: 12
• browser: chromium

<igx-snackbar #snackbar (clicked)="snackbar.close()" [actionText]="'LABELS.CLOSE' | translate" class="warning-snackbar">
  <div *ngFor="let message of snackMessages" class="white-space-pre-wrap">{{ message }}</div>
</igx-snackbar>

@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';
@import '~styles/variables';

$snackbar-theme: igx-snackbar-theme(
  $text-color: black,
  $background: $warn,
  $button-color: black,
  $border-radius: 12px
);

@include igx-snackbar($snackbar-theme);

.warning-snackbar::ng-deep {

  flex: auto 1 1;
  min-width: 300px;

  .igx-snackbar__message {
    width: 100%;
    max-height: 120px;
    padding-right: 1.25em;
    overflow-y: auto;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
  }

  .igx-snackbar__message::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  .igx-snackbar__message::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .1)
  }

  /* Handle todo this seems to not be working */
  .igx-snackbar__message::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
  }

  /* Handle on hover */
  .igx-snackbar__message::-webkit-scrollbar-thumb:hover {
    background: black;
    border-radius: 10px;
  }
}

[simeonoff]

Do you want to be able to expand the snackbar to the full width of the screen?

Also, can you attach a samples with the behavior before and after?

[ricardosaracino]

The client wanted the snack to be full width.

The Before and after screen shots are in the pictures above. the first one is before the second one is after.