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

AngularJs Auto Scroll Not working

10 Answers 375 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 03 Jan 2017, 10:48 AM

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>

10 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 Jan 2017, 12:53 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 04 Jan 2017, 01:31 PM

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)

0
Stefan
Telerik team
answered on 06 Jan 2017, 08:52 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 06 Jan 2017, 02:25 PM
Unfortunately this will hide the scrollbars for every element on the page wont it. Thanks.
0
Accepted
Stefan
Telerik team
answered on 09 Jan 2017, 04:02 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 11 Jan 2017, 08:59 AM

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

Thanks for all your help!

Marc

0
Eduardo
Top achievements
Rank 1
answered on 07 Jun 2018, 04:32 PM

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?

0
Eduardo
Top achievements
Rank 1
answered on 07 Jun 2018, 05:19 PM
0
yogesh
Top achievements
Rank 1
answered on 11 Sep 2020, 07:48 AM

Hello Stefan,

It works with jquery. Anything for Angular version?

 

Thanks

0
Anton Mironov
Telerik team
answered on 14 Sep 2020, 03:40 PM

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:

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:

Will be glad to assist you further.


Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Sortable
Asked by
Marc
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Marc
Top achievements
Rank 1
Eduardo
Top achievements
Rank 1
yogesh
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or