[Ionic 4]Beta 12: Styling of "inner-scroll"-div

Ionic Framework
1

Hey everyone,

i’ve developed a simple application with the beginning of beta.0. Everything is now working and i upgraded lately to Beta 12. It’s all fine, except, that the has now a shadow-dom with a

inside of it.

This inner-scroll was had a transparent background in beta.0. Now it is white (the color is defined in a -Tag in the shadow-root). I tried to set the sass-variable and the color directly with sass (including all kinds of selectors which should give me the shadow-root).

What can i do now to get this inner-scroll transparent or at least give it a background-image?
Thank you in advance
Kind regards
Patrick

2

Have you tried:

/deep/ .css-class-name-of-your-inner-scroll {
  background...
}
3

I don’t understand your response… could you provide an other example more detailed…? I’ve also had the same problem as @patrick_schnell, I need place a card inside in an inner-scroll in the middle of a page… I had read that one possible solution would be overwrite .inner-scroll styles as

justify-content: center;
display:flex;
align-items: center;

But I am not able to do so in the right way.

Thanks

4
5

I wanna change the position att of .inner-scroll but this don’t work:

ion-content .inner-scroll {
   position: inherit !important;
}

The fixed styles make it really hard to integrate this lib.

I already make some advances in some points, after spend many hours. It should not to be so complicate change this but, well…

<ion-router-outlet style="contain: inherit !important;overflow: inherit !important;"></ion-router-outlet>

.ion-page {
  contain: inherit !important;
  overflow: inherit !important;
}
6

Hi, this solution worked for me

ion-menu > ion-content {
   // overwrite inline styles
   --offset-bottom: auto!important;
   --overflow: hidden;
   overflow: auto;
   &::-webkit-scrollbar {
    display: none;
  }