Skip to content

Body scroll blocking when component attached to container #112

@Romko775

Description

@Romko775

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When trying to make a portal or directly call dialog when loading for specific components blocks (lets assume like a dashboard), the body was set with ngneat-dialog-hidden class and blocks entire page scroll.

Expected behavior

Choose which DOM element scroll should be blocked (body, container it attached to etc)

Minimal reproduction of the problem with instructions

constructor(
        private dialogService: DialogService,
        private el: ElementRef
    ) {
      this.dialogService.open(SpinnerBoxComponent, {
            container: this.el,
            closeButton: false,
            enableClose: false,
            width: 'auto',
        })
    }

What is the motivation / use case for changing the behavior?

The possibility to control the dialog component per component scope (like dashboard module stats etc) and to not block page scroll.

Environment


Angular version: 14.1.2

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [X] Edge version 116.0.1938.54 (Official build) (arm64)
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions