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

Resizing Scrollable Menu

1 Answer 232 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Jamie
Top achievements
Rank 1
Veteran
Jamie asked on 25 Feb 2018, 06:11 PM
     Does anyone know how to make the scrollable menu option work based on the size of the screen?  I can get it to work if I explicitly set a width on my menu but I want the menu width to be based on the screen size.  So if a user is viewing the menu full screen it wouldn't scroll because everything fits but if they shrink the window (or view it on a smaller screen) then it would scroll.

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 27 Feb 2018, 02:22 PM
Hello Jamie,

You can use media queries and set different width to the Menu wrapper depending on the screen size. Below is an example of such style:
<style>
    @media only screen and (max-width: 1020px) {
      .k-menu-scroll-wrapper  {
          width: 550px !important;
      }   
    }
     
    @media only screen and (max-width: 960px) {
      .k-menu-scroll-wrapper  {
          width: 150px !important;
      }   
    }
  </style>


Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Menu
Asked by
Jamie
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
Share this question
or