AngularJs Auto Scroll Not working

[Marc]

The following does not work:

<div class="col-lg-8" id="toolbarContainer" data-ng-show="!showToolbarButtons" style="overflow:hidden;">
<div class="col-lg-1" style="padding-top: 5px;">
<kendo-button id="leftScrollButton" data-ng-click="scrollingLeft()" style="float: right;">
<span class="k-icon k-i-arrow-w"></span></kendo-button>
</div>
<div class="k-button-group" id="toolbarButtonGroup" kendo-sortable k-change="onChangeButtons" k-container="toolbarContainer"
k-auto-scroll="true" style="padding-top: 5px; overflow:hidden">
<span ng-repeat="availableWindow in availableWindows">
<kendo-button
style="font-size: 8pt"
data-ng-style="getButtonStyle(availableWindow.id)"
data-ng-click="toolbarButton(availableWindow.id)">
{{availableWindow.shortName ? availableWindow.shortName : availableWindow.window.title()}}
</kendo-button>
</span>
</div>
<div class="col-lg-1" style="padding-top: 5px">
<kendo-button id="rightScrollButton" data-ng-click="scrollingRight()">
<span class="k-icon k-i-arrow-e"></span></kendo-button>
</div>
</div>

[Stefan]

Hello Marc,

I can assume that the issue occurs because all of the requirements are not met.

For example, the CSS overflow property should be auto and the container should have height and width set:

http://docs.telerik.com/kendo-ui/api/javascript/ui/sortable#configuration-autoScroll

If the issue still occurs after the requirements are met, please send a fully runnable example so I can investigate further.

Regards,
Stefan
Telerik by Progress

[Marc]

Hi Stefan!

Thanks for pointing this out. It's working (almost) for me now. I would like to hide the scrollbars - is there any way to do this and still have auto scroll work correctly? (adding overflow:hidden; to my parent element does not work)

[Stefan]

Hello Marc,

Using the CSS rule overflow: hidden will not only hide the scrollbar but it will disable the scroll functionality as well.

I can suggest using the following CSS to hide the scrollbar and at the same time use the overflow: auto in order to have a scrolling container:

::-webkit-scrollbar {
  display: none;
}

More information on the subject can be found at:

http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page

Regards,
Stefan
Telerik by Progress

[Marc]

Unfortunately this will hide the scrollbars for every element on the page wont it. Thanks.

[Stefan]

Hello Marc,

In the link from StackOverflow is demonstrated how the style can be applied to a specific element on the page:

#element::-webkit-scrollbar {
    display: none;
}

Please let me know If this still does not work as expected.

Regards,
Stefan
Telerik by Progress

[Marc]

Yes this does work. However due to other problems I've had to give up on this idea!

Thanks for all your help!

Marc

[Eduardo]

I am trying to do this work, based in this kendo page examlple:

https://demos.telerik.com/kendo-ui/sortable/handlers

If I add scroll to the div sortable, how can I force the scroll move up or down?

[Eduardo]

best example here:

https://dojo.telerik.com/otuqoDuy

[yogesh]

Hello Stefan,

It works with jquery. Anything for Angular version?

 

Thanks

[Anton Mironov]

Hello Yogesh,

Angular has 2 major versions. If you are using Angular 2, I would suggest that you follow our official resource for NumericTextBox in the link below:
https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox 

For Angular 1 you can use the Kendo UI for jQuery components:

• https://demos.telerik.com/kendo-ui/numerictextbox/angular

In case the faulty behavior could be represented in jQuery version, feel free to use the following dojo example as a template and modify it to demonstrate the issue you are facing. Then, you can send it back to me in this thread:

• https://dojo.telerik.com/uwOWiGay

Will be glad to assist you further.


Kind Regards,
Anton Mironov
Progress Telerik