Horizontal scroll not scrolling about ngx-ui-scroll

[dhilt]

@sesellis Thanks for the issue and especially for stackblitz demo. With the help of your demo the problem could be investigated quite quickly. Let's look at the result html:

Some divs have _ngcontent-c36 attribute, some don't. The styles you defined in app.component.css are being applied with this attribute mention:

.viewport.horizontal[_ngcontent-c36] div[_ngcontent-c36] {
    display: inline-block;
}

And all internal containers created by the *uiScroll directive (<div ui-scroll>, <div data-padding-backward>, <div data-sid="X"> and <div data-padding-forward>) don't have such attribute, and display: inline-block; rule is not applied.

The _ngcontent-cX attributes are being added by the Angular itself in case the encapsulation strategy is set to ViewEncapsulation.Emulated value (which is the default). It means that all divs you defined in the app.component.htm will be marked with _ngcontent-cX attribute, where X is unique for this component. Divs I listed before (without this attribute) are parts of internal *uiScroll component creating run-time. So, we have a styles encapsulation conflict and I see two solutions.

First, change encapsulation strategy of the host component:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None // .Native or .ShadowDom values are fine too
})

Second, move the CSS rule that we are interested in to the global styles.css:

.viewport.horizontal div {
  display: inline-block;
}

[sesellis]

Excellent description and solution recommendations!

Sam