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

Submenu height of vertical menu

3 Answers 132 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 29 Jan 2014, 08:15 AM
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;
}

3 Answers, 1 is accepted

Sort by
0
Marco
Top achievements
Rank 1
answered on 29 Jan 2014, 08:19 AM
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>
0
Accepted
Dimo
Telerik team
answered on 29 Jan 2014, 02:33 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Marco
Top achievements
Rank 1
answered on 29 Jan 2014, 02:43 PM
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!


Tags
Menu
Asked by
Marco
Top achievements
Rank 1
Answers by
Marco
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or