This is a migrated thread and some comments may be shown as answers.

Menu 'bottom left' direction

3 Answers 264 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Artem
Top achievements
Rank 1
Artem asked on 31 May 2013, 09:25 AM
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

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 31 May 2013, 09:53 AM
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!
0
Antonis
Top achievements
Rank 1
answered on 21 Jun 2013, 07:41 AM
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.
0
Dimiter Madjarov
Telerik team
answered on 24 Jun 2013, 09:53 AM
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!
Tags
Menu
Asked by
Artem
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Antonis
Top achievements
Rank 1
Share this question
or