p-dialog scrolling issue
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 25
- Joined: 31 Jan 2013, 02:54
When creating a dialog with a large amount of text for the screen space the dialog gets a scroll bar. When displayed, the text has scrolled all the way to the bottom and the user has to scroll back to the top of the dialog to start reading. I would like to be able to render the dialog with the scroll all the way to the top so that the user can start reading without scrolling first. How do I accomplish that? Nothing I have tried works.
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)
PrimeFaces (JSF)
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Do you have Apollo NG or Faces? Your signature mentions both.
-
- Posts: 25
- Joined: 31 Jan 2013, 02:54
I apologize - I do use both. Faces is so good that I eagerly purchased the PrimeNG Apollo theme when I had a need.
I was hoping that since I posted in the Apollo PrimeNG board that it would be clear which one I was inquiring about, but people post in the wrong place all the time and I don't know what your interface looks like -- I should have been clear.
This question is about the Apollo NG version of the scrolling dialog.
I was hoping that since I posted in the Apollo PrimeNG board that it would be clear which one I was inquiring about, but people post in the wrong place all the time and I don't know what your interface looks like -- I should have been clear.
This question is about the Apollo NG version of the scrolling dialog.
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)
PrimeFaces (JSF)
-
- Posts: 25
- Joined: 31 Jan 2013, 02:54
Bumping my question since I answered yours above - The question is about Apollo NG. I am still stuck.cagatay.civici wrote: ↑01 Jun 2018, 09:07Do you have Apollo NG or Faces? Your signature mentions both.
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)
PrimeFaces (JSF)
-
- Posts: 25
- Joined: 31 Jan 2013, 02:54
Been fighting this for a week and have not found a way to actually do what I asked, but I did find a solution and I hate unanswered questions so I wanted to share in case someone else is having the same problem.
The problem as I stated it above was that I wanted the dialog (with enough text that forced it to scroll) to automatically scroll to the correct place - which I thought was at the top of the form so that the dialog box reader could read the informative text starting at the top. I think that PrimeNG evidently sees it differently and scrolls to the first user interaction - in my case the Accept button at the bottom of the dialog. I can see a case for both, perhaps this should be an option.
The solution is to put an interaction at the top so that the dialog scrolls to the top. In my case, right after the <p-dialog> I placed the text inside a <p-scrollpanel> because I knew it would end up scrolling anyway. By making it the right size, and since a scrollPanel is a user interaction component, the PrimeNG dialog now "just works". It looks like this:
Hope that helps someone.
The problem as I stated it above was that I wanted the dialog (with enough text that forced it to scroll) to automatically scroll to the correct place - which I thought was at the top of the form so that the dialog box reader could read the informative text starting at the top. I think that PrimeNG evidently sees it differently and scrolls to the first user interaction - in my case the Accept button at the bottom of the dialog. I can see a case for both, perhaps this should be an option.
The solution is to put an interaction at the top so that the dialog scrolls to the top. In my case, right after the <p-dialog> I placed the text inside a <p-scrollpanel> because I knew it would end up scrolling anyway. By making it the right size, and since a scrollPanel is a user interaction component, the PrimeNG dialog now "just works". It looks like this:
Code: Select all
<p-dialog
header="Privacy Policy"
[(visible)]="privacyPolicyDisplay"
[modal]="true" [responsive]="true"
[width]="350" [minWidth]="200" [minY]="70">
<p-scrollPanel [style]="{width: '100%', height: '200px'}">
<p>Here is my privacy policy text that, when long enough, will scroll.</p>
</p-scrollPanel>
<p-footer>
<button type="button" pButton icon="fa-close" (click)="privacyPolicyDisplay=false" label="Accept"></button>
</p-footer>
</p-dialog>
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)
PrimeFaces (JSF)
-
- Posts: 25
- Joined: 31 Jan 2013, 02:54
Yay! I think I suggested that this be an option! Glad to see this tool improving all the time!
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)
PrimeFaces (JSF)
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests