Menu Popup Overlay

4 posts, 1 answers
  1. Ricky
    Ricky avatar
    16 posts
    Member since:
    Aug 2016

    Posted 09 Feb Link to this post

    I have put the div for the Kendo Grid inside another div which limits the area on screen used. When the popup for sorting and column selection is used, this might now popup at a position where it should leave this limiting div to show its contents. Take a look at the attached picture, it shows the problem much clearer.

     

    Some Kendo UI widgets have a "attachTo" property to configure where the DOM element will be inserted for the popup but this does not seem to be the case here. How can I fix that situation?

  2. Ricky
    Ricky avatar
    16 posts
    Member since:
    Aug 2016

    Posted 09 Feb in reply to Ricky Link to this post

    I tried to build up a dojo example but there the popup always get attached to the body and that way it works as expected. Just in my complex application it looks like it is attached just on the same level as the grid div container. What could be the reason for that?
  3. Ricky
    Ricky avatar
    16 posts
    Member since:
    Aug 2016

    Posted 09 Feb in reply to Ricky Link to this post

    Ok, I found out the reason is I am using the CSS class k-group for a DIV in the area and the popup mechnics lookup for close k-group - and overwriting with an appendTo option is not possible as the popup is used indirectly from the Grid.

    The k-group should describe a DIV area which is some kind of widget area on my own, will set how to replace it.

  4. Answer
    Stefan
    Admin
    Stefan avatar
    682 posts

    Posted 13 Feb Link to this post

    Hello Ricky,

    I'm glad to hear that the issue is located.

    In general, I can suggest checking the article for the widget styling where there is information about our CSS classes naming convention and how they can be modified if needed:

    http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling

    Let me know if additional information is needed on this matter.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top