Default scrolling position

[Ewgenij]

In my kendo-dialog the content takes more height than the height of the dialog. Therefore it is scrolled to the bottom when the dialog opens. How can I manage it to be scrolled to the top when the dialog opens? So the dialog content should display its beginning and then the user could scroll down.

[Dimiter Madjarov]

Hi,

The mentioned desired behaviour is actually the default one of the Dialog component - the top of the content is displayed initially. Here is an example that demonstrates this in action:

https://stackblitz.com/edit/angular-uagc2d?file=app/app.component.ts

I assume that in the current case there is an element in the Dialog's content which is being focused initially, so the browser scrolls to this element in order to bring it into its view. Could you check if that is the case? If not, please provide a runnable stackblitz example, or update mine, to demonstrate the problem? Thank you in advance!

Regards,
Dimiter Madjarov
Progress Telerik

[Ewgenij]

Just move <button kendoButton (click)="close('yes')" primary="true">Yes</button> from the 

<kendo-dialog-actions> section to the rest of the elements:

 

<p style="margin: 30px; text-align: center;">Content</p>
<p style="margin: 30px; text-align: center;">Content</p>
<p style="margin: 30px; text-align: center;">Content</p>
<p style="margin: 30px; text-align: center;">Content</p>
<button kendoButton (click)="close('yes')" primary="true">Yes</button>

 

And here you are. The behaviour is there only if the button is primary - 

primary="true"

[Martin Bechev]

Hello Ewgenij,

Thank you for the code snippet provided.

By default, when the Dialog is opened, the button with .k-primary class is automatically focused. Since the button is placed at the bottom of a scrollable container and it is focused, the browser automatically scrolls the dialog. However, the default focusing mechanism can be changed by using the autoFocusedElement property of the Dialog.

For example, the following code snippet will autofocus the input:

<kendo-dialog
        title="Please confirm"
        *ngIf="opened"
           autoFocusedElement=".k-input"
      >
        <kendo-textbox
          placeholder="Type your message here"
          [clearButton]="true"
        >
        </kendo-textbox>

        <kendo-dialog-actions>
          <button kendoButton (click)="close('no')">No</button>
          <button kendoButton (click)="close('yes')" primary="true">Yes</button>
        </kendo-dialog-actions>
      </kendo-dialog>

I hope this helps.

Regards,
Martin
Progress Telerik