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

Hide vertical scrollbar in widgets

4 Answers 584 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 15 Mar 2018, 07:19 PM

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

4 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 19 Mar 2018, 08:43 AM
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.
0
Tayger
Top achievements
Rank 1
Iron
answered on 19 Mar 2018, 09:33 PM

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

0
Tayger
Top achievements
Rank 1
Iron
answered on 19 Mar 2018, 09:42 PM

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!

 

 

0
Magdalena
Telerik team
answered on 20 Mar 2018, 07:54 AM
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.
Tags
DropDownList
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Magdalena
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or