Using custom dialog title does not scroll lock

2 posts, 1 answers
  1. James
    James avatar
    35 posts
    Member since:
    Mar 2018

    Posted 23 Jan 2019 Link to this post

    I am building a dialog using ng-template as per the documentation. 

     

    https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-using-templates

     

    I want to provide a custom title bar.  So I am using the <kendo-dialog-titlebar> directive to create my title.  This displays correctly but if my dialog window is too long and I have to scroll, then I lose the title bar when I scroll to the bottom.  The title bar should remain locked at the top no matter where I scroll.  Here is an example I  modified from the docs

     

    https://stackblitz.com/edit/angular-ft4nau

     

    How can i create a custom title bar and have it scroll locked?

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 25 Jan 2019 Link to this post

    Hello James,

    The described behavior is to be expected, as the Title template is passed as part of the Dialog content, and thus is rendered within the content area.

    You can set a custom title either via providing the desired custom text in the "title" property of the Dialog configuration settings object:

    https://stackblitz.com/edit/angular-ft4nau-1zsyvn?file=app/app.component.ts

    ... or if additional markup needs to be added like in the describe use case, provide a whole component that will contain the Dialog Title and Content like in the following demos:

    https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-passing-title-content-and-actions-as-a-single-component

    Here is the same example, adjusted to better match the provided code:

    https://stackblitz.com/edit/angular-3ms2bn?file=app/user-info.component.ts

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top