Submenu height of vertical menu

[Marco]

I have a vertical oriented menu with a height of 100%. Is it possible to set the height of the submenu to 100%? Or does this involve changing the rendering template within the kendo.ui.menu.js? I tried to set the following css classes, without success:

.k-animation-container {
           height: 100%;
           max-height: none;
       }
 .k-popup {
           height: 100%;
           max-height: none;
}

[Marco]

And the menu markup:

​

<div id="container" style="height: 100%;">
     <div style="float: left; height: 100%; width: 200px; background-color: gray">
         <ul id="panelbar" style="height: 100%">
             <li>A
                     <ul style="height: 100%; max-height: none;">
                         <li>A.A</li>
                         <li>A.B<li>
                         <li>A.C<li>
                         <li>A.D</li>
                         <li>A.E</li>
                     </ul>
             </li>
             <li>B
                 <ul>
                     <li>B.A</li>
                     <li>B.B</li>
                     <li>B.C</li>
                 </ul>

             </li>
             <li>C
                 <ul>
                     <li>C.A</li>
                 </ul>
             </li>
         </ul>
     </div>
     <div id="main" style="height: 100%; overflow: hidden; background-color: azure;">
         <div style="background-color: gold;">Main content</div>
         <div style="background-color: aquamarine;">Details</div>
     </div>
 </div>

[Dimo]

Hi Marco,

Although the 100% height styles, which you have set currently, do not work for two different reasons (see below), I must point out that using the k-animation-container and k-popup classes globally in the shown way is able to break all Kendo UI popups on the page or in your application.

Regarding your use case, please review the following example.

http://jsfiddle.net/dimodi/mmr5x/

===

Why don't the 100% heights work?

1. You are trying to override inline height styles with external height styles without using "!important".
2. A percentage height requires an explicit height set to the parent element (Menu item), which is not set in this case.

Regards,
Dimo
Telerik

[Marco]

Thanks Dimo,

I didn't posted my css, i also had defined:

body, html {

        height: 100%;

    }


I'm aware of my brutal approach, i would have narrowed the css selectors down on id level. Nevertheless, thanks for the example!