Submenu height of vertical menu

4 posts, 1 answers
  1. Marco
    Marco avatar
    23 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 Link to this post

    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;
    }
  2. Marco
    Marco avatar
    23 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 29 Jan 2014 Link to this post

    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!
  5. Marco
    Marco avatar
    23 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 in reply to Dimo Link to this post

    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!


Back to Top
Kendo UI is VS 2017 Ready