CODEWITHSUNDEEP
cssionic-frameworkdomsassionic4
DarkHorse
DarkHorse

Reputation: 349

Styling .toolbar-container of ion-toolbar shadow dom in ionic 4+

I've tried lots of methods. but not working. Expect like this style

ion-toolbar {
    contain: none;
    .toolbar-container {
        overflow: visible;  // not working
        contain: none;  // not working
    }
}

Do you have any solution?

Upvotes: 3

Views: 1438

Answers (1)

vfranchi
vfranchi

Reputation: 488

I worked around this issue with a new Directive:

ng generate directive allow-overflow

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appAllowOverflow]'
})
export class AllowOverflowDirective {

  constructor(el: ElementRef)
  {
    let toolbar : HTMLElement = el.nativeElement;
    setTimeout(() => {
      let container : HTMLElement = toolbar.shadowRoot.querySelector(".toolbar-container");
      if (container)
      {
        // (as any) is just to suppress a warning
        (container.style as any).contain = "none";
        container.style.overflow = "visible";
      }
    });
  }
}

Then I added the <ion-toolbar> like this:

<ion-toolbar appAllowOverflow>
    ...
</ion-toolbar>

I also added this CSS rule for <ion-toolbar>:

ion-toolbar[appAllowOverflow]
{
  contain: none;
}

Upvotes: 3

Related Questions