don't create new div[.ps-content]

[dhilgarth]

This can cause all kinds of layout problems.

[sconix]

Could you be more specific? We use this in our project very widely and in many different layouts and haven't bumped in to any layout problems. The is also the directive which gives you more control over the structure i.e. there are not elements created.

[dhilgarth]

I am using dragula. Because of the extra div, I can't apply the dragula directives to the perfect-scrollbar tag, because that would result in the whole div[.ps-content] to be dragged.

However, because the div[.ps-content] isn't styled in any way, like height being set etc. my own div inside the perfect-scrollbar tag will have a height of 0 if no items are present and therefore it is not available as a drop target.

The directive I was unable to get to work. I am getting something to the tune of "can't read property offsetWidth of undefined"

[sconix]

The problem is that the ps-content is needed for the automatic update of the scroll area. So that the scroll area can update the scroll bars when the content size changes. So I can't remove it or the component usage would get a lot more complex.

What I can do is to add min-height for the ps-content so that if your scroll area has a definite height then the content would always be at least as large. But this of course wont solve your first problem and would not help when using flex layout. Anyway for your use case the directive is the way to go, but I do see a bug in the directive that if there is no child element available it will cause the error you are seeing.

So I will release a new version with fixed directive which you should then be able to use for your custom use case.

[dhilgarth]

Thanks for checking this. I agree, in my specific use case I should use the directive. Thanks for releasing a new version with a fix.

Regarding ps-content: Are you saying that it is needed so that I don't have to call update myself? If so, I have at least one case where this isn't working.

[sconix]

Yes the ps-content is used to notice the change in the content height. So scrollbars are automatically updated if the scroll area size changes or if the content size changes. The change detection should be rather fool prove, but since the library is run outside of the angular change detection there can be a situation where the change detection is not run. So if you run into this situation you can use the [runInsideAngular]="true", but this will make the scroll area much heavier performance vice, the other option is to call the manual change detection or call the update manually when ever you have a situation that the scroll area does not update.

Optimizations are bit problematic when dealing with "legacy" none angular 2 libraries, but I have tried to make it so that the defaults work for most cases without causing performance issues. I plan to write a pure angular version of this library at some point once we have first release of our product, but that is most likely closer to the end of the year unless I get crazy during the summer :)

[sconix]

I just released 2.0.4. Let me know if the directive does not work for you. I only have simple directive test case and we are not using it yet in our main project.

[dhilgarth]

It works now, thanks!

[karthickDhanapal]

@sconix : Im using perfect scrollbar in my angular 2 application. <div [perfectScrollbar]="scrollBarConfiguration" class="ps-container">

[sconix]

Naturally you should be able to do that, but however with that old Angular version I can not help you, I don't remember how the old version of this library was styled etc. and the perfect-scrollbar itself went through a big change when it updated from 0.8 to 1.0.

[karthickDhanapal]

@sconix : Currently we have updated the angular 5 and we are using the perfect scrollbar version("ngx-perfect-scrollbar": "5.3.1").

[sconix]

Ah ok you were speaking about angular 2 application so I assumed you are using angular 2.

Without any pseudo code about your structure its bit hard to understand from the description that how you are trying to use the perfect-scrollbar. The scroll area itself always needs height so make sure that the ps component/element has a fixed or flex height.

[karthickDhanapal]

I have pasted my markup.

<div [perfectScrollbar]="scrollBarConfiguration" class="ps-container">
        <div class="ps-content">
                        <object [attr.type]="'text/html'" [data]="url"></object>
          </div>
</div>

I also set the ui container height to container div in css. the content is loaded only within that height. Other contents are truncated.

[sconix]

As long as you have fixed height with the div where perfectScrollbar directive is used it should work. If the content of the object changes asynchronously you may need to call the update manually for perfect-scrollbar.

[karthickDhanapal]

We can able to get the scrollbar. However inside the content the pdf/html contents are truncated. i.e i have pdf with 252 pages i have set my container height as 970px. The container shows only two pages with scrollbar other pages are not showing. Note: I have disabled the scrollbar for the pdf which is loaded inside the object element.

[sconix]

That sound like the height of the object has changed asynchronously so you need to let ps know about it by calling update. The component version in this library has build in system to detect most of the content changes and it calls the update automatically.

[karthickDhanapal]

I also called the this.ps.update(); in ngOnChanges. But there is no luck.

[sconix]

The update needs to always happen after the DOM has the changes and when ngOnChanges is called the change has only happened in Angular not in DOM. Have you just tried the component version? It should not need calling update.

[karthickDhanapal]

Sorry i didn't get what the component version means. Are you referring ps version. If yes it is "ngx-perfect-scrollbar": "5.3.1"

[sconix]

No I mean using the component instead of the directive. You are using the directive now so switch the div to <perfect-scrollbar [config]="scrollbarConfiguration">... instead.

[karthickDhanapal]

Thanks i will check and let you know.

[karthickDhanapal]

<perfect-scrollbar [config]="scrollbarConfiguration" [style.min-height.px] = "iframeHeight" class="ps-container">    
        <object #ReportFrame id="reportFrame"
            [attr.type]="'text/html'"
            [data]="url"  ></object>
</perfect-scrollbar>

I have tried with this now the scrollbar itself not showing. Does anything i want to do extra.

[sconix]

With min height you are telling only the minimum height and that is not enough. The scroll area will grow to fit the content unless you specify it fixed height.