Hide vertical scrollbar in widgets

5 posts, 0 answers
  1. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 15 Mar Link to this post

    Hello

    I wanted to hide the vertical scrollbar in several widgets but still allowing the scrolling functionality. This doesn't seem to be an easy task since browser providers do not support officially.

    Im looking now for a solution for the following widgets:
    - kendoDropDownList
    - kendoDialog

    I have checked the forums here so far but could only find a proper solution for the window widget (which I couldn't make working for the mentioned widgets above). In between I've checked Stackoverlow and found an easy solution: Hide scrollbar
    It works great for all standard HTML windows/tags I'm using in my project but I don't know how to apply this (or a similar) solution to the mentioned KendoUI widgets? Is there any solution?

    Regards

  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 19 Mar Link to this post

    Hello Tayger,

    If you would like to use the provided approach, the following elements are represented as parents and childrens in the mentioned widgets:
    • kendoDropDownList:
      parent: .k-list-scroller (to overwrite applied dynamic inline height, use !important)
      children: .k-list k-reset

    • kendoDialog:
      parent: .k-dialog
      children: .k-dialog-content (uses inner padding, so we recommend use calculated width)

    In the above links I am providing Dojo samples with applied solutions.


    Regards,
    Magdalena
    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.
  3. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 19 Mar in reply to Magdalena Link to this post

    Hi Madalena

    Thank your your answer! The Dialog works fine that way, the Dropdownlist seems to be blocked (not scrollable). Maybe I can find a solution based on your examples.

    Regards

  4. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 19 Mar in reply to Magdalena Link to this post

    Ha, just found the problem/solution. Its in the .k-list part, remove ''k-reset", then it works!

    .k-list {
      height: 100%;
      width: 100%;
      padding-right: 17px;
      overflow-y: scroll;
      overflow: auto;
    }

     

    Thank you!

     

     

  5. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 20 Mar Link to this post

    Hi Tayger,

    We are glad that you have succeeded to find the issue in the provided solution.

    Regards,
    Magdalena
    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.
Back to Top