Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ngx-simplebar directive resize issues #685

Open
mmestas opened this issue Apr 15, 2024 · 1 comment
Open

ngx-simplebar directive resize issues #685

mmestas opened this issue Apr 15, 2024 · 1 comment

Comments

@mmestas
Copy link

mmestas commented Apr 15, 2024

Describe the bug
I'm developing in Angular 17 and using Webview2 to run the app.
In the places where I am using , when I resize the app larger, it's fine, but when I shrink back to a smaller size, even to the original size where I started, everything inside the directive remains the larger, resized width and doesn't shrink back. For example, I have an element inside the simplebar directive set to 100% width. This works fine and fills out the width of the view 100%. I resize the app to a larger width, and the element obliges by resizing to the full width. But, when I resize back down to a smaller width, the element remains at the increased width, causing scrollbars to appear (note, these are not the ngx-scrollbars but the default scrollars of the browser/webview), rather than shrinking back to being 100% width of its container like it was before. i.e. if the div is at 700px width to start with, and then resize larger, to say, 900px width, everything is good, but upon shrinking the app back, the div stays at 900px width, even though the app itself is now at 700px again.
To test, I removed ngx-simplebar, and the resizing behavior works as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Run an Angular 17 app using Webview2
  2. Have ngx-scrollbar directive surrounding an element with 100% width
  3. Resize the app larger - everything should look fine
  4. Resize the app back to the smaller/original size - scrollbars now appear and the width of the element remains at 100% width of the larger resized app even though it has been resized to a smaller width.

Your environment

Software Version(s)
SimpleBar 6.2.5
SimpleBar Angular 3.2.4
Angular v 17
Browser Webview2
npm/Yarn
Operating System
@mmestas
Copy link
Author

mmestas commented Apr 15, 2024

I made a workaround by doing
@HostListener('window:resize', ['$event']) onResize(event: Event) { let t = event.target as Window const calcWidth = t.innerWidth - 375; this.innerWidth = calcWidth + 'px'; }

and
<ngx-simplebar class="h-100" [ngStyle]="{'width': innerWidth}">

But this slows the app down.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant