Popup Editor Buttons always visible with vertical scrolling

6 posts, 0 answers
  1. Michael
    Michael avatar
    19 posts
    Member since:
    May 2015

    Posted 06 Sep 2018 Link to this post

    We have a Grid with editable: "popup" and custom sizing. Now when a vertical scrollbar is necessary, the "Update" and "Cancel" buttons are not visible because they are scrolled to the bottom (see attached screenshot).

    I would like to always show the buttons and only scroll the content. What's the best way to achieve this behavior? Thank you.

  2.
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 10 Sep 2018 Link to this post

    Hi Michael,

    Implementing the behavior would require including additional CSS that would customize the appearance of the popup editor. This way the container holding the update and cancel buttons can be configured to have fixed position and would not be scrolled. The dojo below outlines the approach:



    Regards,
    Viktor Tachev
    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.
  5. Michael
    Michael avatar
    19 posts
    Member since:
    May 2015

    Posted 11 Sep 2018 in reply to Viktor Tachev Link to this post

    Hi Viktor

    Thank you for your reply.

    In your dojo however - I unfortunately don't see any buttons at all. I am using IE 11, which is the targeted browser for our application. Could you please re-check the code for IE 11? Thank you very much.

    Best regards,
    Michael

  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 12 Sep 2018 Link to this post

    Hello Michael,

    The reason behind this is that position: fixed in IE works differently than in other browsers. Thus, in order to position the buttons outside the scroll area you can use custom JavaScript. Inside the Grid edit event you can calculate the position of the popup editor and set the position of the buttons accordingly. 



    Regards,
    Viktor Tachev
    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.
  8.
  9. Michael
    Michael avatar
    19 posts
    Member since:
    May 2015

    Posted 25 Sep 2018 in reply to Viktor Tachev Link to this post

    Hi Viktor

    Thanks for your answer. Unfortunately it's not really working in IE. The Buttons are missing before a scroll and on move of the editor window they stay in place.

    We found a working solution with jQuery:
    http://dojo.telerik.com/UWoGUDUy/2

  11. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 27 Sep 2018 Link to this post

    Hello Michael,

    Indeed in such scenarios where IE behaves differently than other browsers it can be easier to use JavaScript to position elements on the page. I am glad that you have the functionality working as expected. Thank you for sharing your solution with the community. 

    Regards,
    Viktor Tachev
    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