Scrollbars not showing up even though initialised

[pitops]

Even doing the following doesn't work. I can see the styles being applied and no errors in console, but the scroll event does not trigger not the scrollbars are showing ( i can see them initialised but no actual values/height are given). Please note that my page overall has a scrollbar, but shouldn't i have "nested scrollbars" just for my specific component?

<div class="scroll-container" fxLayout="column" style="position: relative" fxLayoutAlign="stretch" fxFlex>
        <perfect-scrollbar fxFlex [config]="config" [scrollIndicators]="true">
       ....
        </perfect-scrollbar>
      </div>

[sconix]

Is your scroll container properly styled /sized. If not the of course there is no scrolbars if your container keeps growing.

[tarun-sharma]

@sconix scrollbar is not working on internet explorer and firefox for the dynamic data. It won't wrap data into the specific height and it just overflow the whole content

[sconix]

We don't have any issues with Firefox nor IE. So you need to check your styles that the perfect scrollbar gets fixed / correct height it needs that to work. It has default style of height 100% but that wont of course work for every situation.

[tarun-sharma]

@sconix In your example, you are using FlexLayoutModule. Do i have to use this module to make it work?

[sconix]

No, you can style the height of the perfect-scrollbar area as you like. It does not matter how the perfect-scrollbar gets the height as long as it has a some height set via styles, otherwise it naturally grows like any other element.

[tarun-sharma]

I have defined a fixed max-height in my box-container class but whenever i am loading the component in Internet Explorer, the content overflows from the container although the scrollbar is visible. Can you please tell me the exact styling that i should be applying to my box-container class ? Below is my code for the same:

.box-container { width: 100% !important; max-width: 100% !important; padding:0px !important; max-height: 370px; box-shadow: none !important; margin: 14px 0px !important; background-color:#fff !important; }

[sconix]

Hard to say without an example, if you mean that the scrollbar is there then it might also be that some other style applies overflow: visible etc. to the perfect-scrollbar element. I assume that you are talking about IE11, if yes then if you can make an Plunker example to demonstrate the problem I can have a look. Without seeing the problem I can only say that its a styling problem which it usually is.

[pitops]

@sconix so you are saying i have to add specific height even though the data is dynamic so that the scroll bars will appear. I will test tonight and let you know. Apart from height the styles are the same as in the example you provided.

If the height turns out to fix my problem, it would be nice if it was included in the documentation - i will let you know tonight and thank you for your reply :)

[sconix]

Data being dynamic or not has no effect. The scrollarea always needs a height, the perfect scrollbar has a default style of 100% so the parent needs to be the one limiting the height or optionally you set the height directly to the perfect scrollbar component via CSS. In the example app I have used flex layout library to make the layout so the height comes from the flex styles.

I haven't mentioned this in the README since its basic html that scrollarea needs a height, and its not mentioned in the perfect-scrollbar docs neither. Its something that is not specific to this library and if I were to document all general CSS and HTML stuff it would be too much of work :)

[pitops]

@sconix I know all that but as you said the plugin itself does not set a fixed height which you could expect to be done out of the box or at least have a default and then be configurable from there. And one could say that seeing height: 100% that its a bug instead.

Making things clear in documentation without assuming anything from anyone is the best way to go in my opinion that is.

Another thing is that i searched for issues and the example to know that i needed to include perfect scrollbar as well as ngx-perfect-scrollbar. As someone who has never worked with perfect-scrollbar before and taking into account that your product is a wrapper, if perfect-scrollbar was set as a dependency when installing ngx-perfect-scrollbar i would waste less time because npm would notify me of that (unless i haven't noticed). Adding it to the setup steps of the documentation even would be awesome.

I am not judging here i am just sharing my thoughts on what would make the documentation better for everyone, from there its up to you. :)

[sconix]

No you don't need to include perfect-scrollbar this library includes it and it is as dependency if you check the package.json. Documentation includes all the steps that are needed to use this library. If something is missing I of course can add it, but including of perfect-scrollbar is not necessary and should not be done (unless you mean by installing then it does not matter if you install it separately).

The height 100% is the ONLY default that is reasonable. I can not set it to any specific height and the height really should become from the parent. And again this is just a wrapper for perfect-scrollbar and thats the way perfect-scrollbar is build so I try to keep changes to minimum and keep the library as true to being just a wrapper and not completely separate library. Maybe I should clarify about this being a wrapper and make it more clear that one needs to get familiar with perfect-scrollbar as well not just with this library.

The documentation is about the usage of this wrapper not about usage of perfect scrollbar. For that I have the link to perfect-scrollbar documentation. The main thing to understand here is that this is just a simple wrapper library and not

[pitops]

Correct me if I am wrong but in your documentation you say that if you want to use the directive you have to @import '~perfect-scrollbar/css/perfect-scrollbar.css'; which is a direct dependency with the perfect-scrollbar (without stating it), am i wrong?

ngx-perfect-scrollbar does not install perfect-scrollbar by default. If you stated that i was a dependency there, then my apologies.

About the height: 100% no argument there. Btw it did work with adding height. So thank you for that, your help is greatly appreciated and your efforts to making this wrapper!

[sconix]

Yes if you use directive then it needs to be imported manually since there is no handy way for the directive to import it afaik, the component imports it directly via the normal style inclusion so thats why for that its not needed. And yes the perfect-scrollbar is listed as dependency for the package so npm should install it automatically.

Your welcome, and even though I disagree on level of documentation all feedback is appreciated. I just want to keep maintaining work to minimum so I have time to do other stuff as well :).

I have added couple lines to the documentation as a result so hopefully its bit better now.

[karthickDhanapal]

@sconix : I have implemented perfect scrollbar. However i am facing some issues with showing that. Im setting the height dynamically to the iframe which is present inside the ps content. When ever i load the content the perfect scrollbar is not shown. But if i resize the UI means i can able to see the perfect scrollbar. I have tried perfectscrollbardirective.update() but no luck.

Can you help me here.

Thank you.

[karthickDhanapal]

@sconix : I am using mat-tab and loading the content inside iframe. When select the first tab it shows the perfect scrollbar. However if i select the second tab it is not showing the perfect scrollbar. But if i resize the browser the perfect scrollbar is showing. or if switch the tabs means it showing the perfect scrollbar

[sconix]

Hard to say without the code. There should not be any reason why it would not be visible / easily resolved. As long as the PS itself has a fixed height and the content is taller calling the update should update the scrollbars.

[karthickDhanapal]

I have observed that when i change height of ps container manually the scrollbar is displayed. Event though the content height is greater than the container height.