Unable to scroll dialog view

[priyanthabuddhika]

I'm submitting a...

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

Current behavior

Unable to scroll when content is overflow in the dialog view

Expected behavior

Able to scroll using a scroll bar and the dialog view should show its content 100%

Minimal reproduction of the problem with instructions

Open a dialog with a custom component that has content that overflows the component's height.

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

Creating a long form with several input fields would be a use case.

Environment

@ngneat/dialog": ^2.0.0

Angular version: 13.0


Browser:
- [X] Chrome (desktop) version 96
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.18.1  
- Platform: Linux  

Others:

[GitHubish]

@priyanthabuddhika something like this?

[dagistan-tuncbilek]

I have also the same issue. I use this code to solve this problem and could not find a better solution in documentation.

Add to syles.css

.ngneat-dialog-content{
  overflow: scroll !important;
}

[NetanelBasal]

You are responsible for designing your dialogs. You can accomplish this by:

<header class="dialog-header">
</header>

<div class="dialog-body">
</div>

<footer>
</footer>

.dialog {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  overflow: auto;
}

.dialog-body {
  overflow: auto;
  flex: 1;
}

Note that you should add the dialog class to the hosted component.