p-dialog scrolling issue

[JeffBrower]

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.

[cagatay.civici]

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

[JeffBrower]

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.

[JeffBrower]

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.

[JeffBrower]

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.

[tho]

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

[JeffBrower]

Yay! I think I suggested that this be an option! Glad to see this tool improving all the time!