2

I am getting problems with one of the kendo controls - Menu.
The problems is that when I open the Sub Menu with C items it's container goes on wrong position. It happens to all elements, but only first time when they are expanded.

Demo http://dojo.telerik.com/UhaKI

To recreate the issue I just added empty div element with big height.
Open the link and scroll down to the bottom, open and expand 2008 item. How to fix that?

mihkov
  • 1,171
  • 13
  • 37
  • I can't tell you how to fix it, but it is your custom style that is interfering with Kendo when it is laying out the sub-menu. If you remove the "float: left;" on the "li.year-item > div.k-animation-container ul li.k-item" style, the problem goes away...but you don't get the 2-column layout that you are going for. – The Dread Pirate Stephen Mar 06 '17 at 15:43
  • Yeah I noticed that, but I need two column menu. – mihkov Mar 06 '17 at 15:46
  • Script don't can quickly compute right height menu, when you put items in two line... (( – grinmax Mar 06 '17 at 15:46
  • @mihkov I'm still trying to solve the problem – grinmax Mar 06 '17 at 15:46

2 Answers2

1

Let's try the suggestion from here: http://www.telerik.com/forums/multi-column-menu.

.k-menu .year-item {
    width: 120px;
}
.k-menu .year-item .k-item {
    float: left;
    width: 50px;
}

http://dojo.telerik.com/@Stephen/EvAPI

The Dread Pirate Stephen
  • 3,089
  • 1
  • 12
  • 14
  • Just found a stupid workaround with JS including two nested `setTimeout` functions before your post, but your solution here is that what I want. Thanks :) Beer++; – mihkov Mar 06 '17 at 19:44
0

Look this solution

ul#menu {
    background-color: green;  color: white;
  }
  li.year-item  div.k-animation-container {
    width: 120px !important;
    top: 0 !important;
    height: auto !important;
  }

  li.year-item >  div.k-animation-container ul li.k-item {
    width: 50%;

}
  .k-menu .k-menu-group>.k-item {
    position: static;
  }

  li.year-item >  div.k-animation-container ul {
    display: flex !important;
    flex-wrap: wrap;
  }

  #big{ 
    height: 1300px;
  }

Live - http://dojo.telerik.com/ExAqo

grinmax
  • 1,835
  • 1
  • 10
  • 13
  • Ok thanks for help, it fixes somehow the appearance. But your solution removes animation and right arrows also I need the menu to appears next to the year. The problem is only first time when it is hovered it gets wrong calculated positions. – mihkov Mar 06 '17 at 16:00
  • @mihkov yes, i understand, but this mistake into script( – grinmax Mar 06 '17 at 16:19
  • is there a way with minimum js code to fix it? For example on Open event.? – mihkov Mar 06 '17 at 16:24
  • 1
    @mihkov I think need write to Kendo team – grinmax Mar 06 '17 at 16:40