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.