Editing shadow DOM in Ionic `ion-item`

Question

I have implemented a table, which is very wide (much wider than the screen), and the user can scroll horizontally.

At the far left, is a task-row component which has an element with a “sticky” header (.task-row_main class), which doesn't move when scrolling horizontally, by using the css position: sticky.

.task-row_main {
    display: flex;
    align-items: center;
    max-width: 230px;
    flex-shrink: 1;
    flex-grow: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 1px;
}

When I add my task-row component into ion-item, the sticky header breaks. Scrolling horizontally causes the sticky header to scroll off screen.

<ion-item>
    <task-row>
    </task-row>
</ion-item>

The reason this happens is because of shadow DOM styling:

When I look into it, I notice why it's not working, because of overflow: hidden on the input-wrapper:

.input-wrapper{
    overflow:hidden;
}

How do I override input-wrapper's overflow property to set it to visible?

I've tried creating a directive and overwriting the css, but it didn't work:

directive:

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
  selector: '[appShadowCss]'
})
export class ShadowCssDirective implements OnChanges {
  @Input() shadowCustomCss: string;

  ngOnChanges(): void {
    const shadow = this.el.nativeElement.shadowRoot || this.el.nativeElement.attachShadow({ mode: 'open' });
    if (shadow) {
      let innerHTML = '';
      innerHTML += '<style>';
      innerHTML += this.shadowCustomCss;
      innerHTML += '</style>';
      shadow.innerHTML += innerHTML;
    }
  }

  constructor(private el: ElementRef) {

  }
}

html:

 `<ion-item appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;}'>`

How do I edit this shadow DOM in ion-item to set overflow: visible?

Josh O'Connor Josh O'Connor · Accepted Answer · 2019-06-27T16:52:20

Turns out there were more overflow:hidden instead of just in input-wrapper{overflow:visible}.

Had to do this:

<ion-item #ionItem appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;} .item-native{overflow:visible;} .item-inner{overflow:visible;}'>

Editing shadow DOM in Ionic `ion-item`

1 Answers