Menu 'bottom left' direction

4 posts, 0 answers
  1. Artem
    Artem avatar
    11 posts
    Member since:
    Jan 2013

    Posted 31 May 2013 Link to this post

    Hi!

    I tried to customize menu direction on example page (http://demos.kendoui.com/web/menu/direction.html) for settings 'bottom left', but sub menu is always displayed in the left side from menu and isn't placed in the bottom. How can we apply this settings for our needs?

    Best regards,
    Artem
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 31 May 2013 Link to this post

    Hi Artem,


    The custom direction "bottom left" means that the root menu items will be opened in the bottom and their sub items to the left. This is stated in the documentation and it is the observed behavior in the demo. Please let me know if I am missing something here.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Antonis
    Antonis avatar
    1 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

    Hi.  

    I already tried this feature. I made a very ugly sample on jsFiddle, but you can see the 'bug' that results from my css approach to 'bottom+left' positioning.

    In our project, we use the menu in the grid, with a small button. So it's important to utilize any space left, and bottom left is the best way to have the menu opened. The problem is that when for some reason the text in the menu selections change dynamically, the width of the k-animation-container, does not change. Basically there is something wrong with the menus with openOnClick behavior. They don't really close in some cases, thus, this width is not recalculated.

    So, in the jsFiddle now. -->  jsFiddle grid/menu example
    - Try to click a dMenu in a grid-row. ( just hover over a row to see it )
    You will see 4 selections in the opening menu ( 'wwwwwwwwwww' hopefully )
    (note: dMenu is my dummy menu, and rMenu is the real one, so when a dummy is clicked, it swaps places with the real one, which is processing it's selections before it's appended to the row)
    The menu, as you may have noticed, is aligned at the bottomLeft position ( having its right side aligned with the right side of the parent )
    - Try now to click any of the four selections.
    The menu closes ( or does it!? ) 
    - Go again to the selected line, and click again the dMenu
    You will get now a menu with 4 selections with the 'ww' text. BUT now there is a big gap on the right side. This is because the width of the k-animation-container is still the same! Although the menu was supposedly closed.
    - Just click twice now on this rMenu, to close it and open it again. Now the 'ww' selections are properly aligned.

    So, can someone tell me why the menu is not closed properly when the user selects something?

    I tried to close and open the menu again, with a very small delay, and this works!

    jsfiddle grid/menu example [fix @ line 97]

    But this is not a proper fix for this.

    Thanks.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 24 Jun 2013 Link to this post

    Hi Antonis,


    This is a quote from my answer in the support thread.

    Generally custom changes, applied to the menu items, that are not included in the Menu API are not supported and can lead to unexpected behavior, like the one in the current implementation. If you consider, that we may improve this aspect of Kendo UI and include dynamic change of the contents of menu items, I would suggest you to post it as a feature suggestion in our Kendo User Voice portal. If it becomes popular among the community, we will consider to implement it in future releases of Kendo UI.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready