p-dialog scrolling issue

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
JeffBrower
Posts: 25
Joined: 31 Jan 2013, 02:54

01 Jun 2018, 07:12

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)

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Jun 2018, 09:07

Do you have Apollo NG or Faces? Your signature mentions both.

JeffBrower
Posts: 25
Joined: 31 Jan 2013, 02:54

01 Jun 2018, 20:24

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.
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)

JeffBrower
Posts: 25
Joined: 31 Jan 2013, 02:54

04 Jun 2018, 17:11

cagatay.civici wrote:
01 Jun 2018, 09:07
Do you have Apollo NG or Faces? Your signature mentions both.
Bumping my question since I answered yours above - The question is about Apollo NG. I am still stuck.
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)

JeffBrower
Posts: 25
Joined: 31 Jan 2013, 02:54

08 Jun 2018, 20:10

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:

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>
Hope that helps someone.
PrimeNG (Angular): Apollo, Mirage
PrimeFaces (JSF)

tho
Posts: 1
Joined: 19 Jul 2019, 06:21

11 Nov 2019, 10:56

Your finding is great. But we have easier way to overcome this issue by adding option focusOnShow="false" to the p-dialog.

JeffBrower
Posts: 25
Joined: 31 Jan 2013, 02:54

11 Nov 2019, 21:28

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)

Post Reply

Return to “Apollo - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests