AngularJs Auto Scroll Not working

11 posts, 1 answers
  1. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 03 Jan 2017 Link to this post

    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>

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 04 Jan 2017 Link to this post

    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 visualization (charts) and form elements.
  3. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 04 Jan 2017 in reply to Stefan Link to this post

    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)

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Jan 2017 Link to this post

    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.
  5. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 06 Jan 2017 in reply to Stefan Link to this post

    Unfortunately this will hide the scrollbars for every element on the page wont it. Thanks.
  6. Answer
    Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 09 Jan 2017 Link to this post

    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 visualization (charts) and form elements.
  7. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 11 Jan 2017 in reply to Stefan Link to this post

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

    Thanks for all your help!

    Marc

  8. Eduardo
    Eduardo avatar
    6 posts
    Member since:
    Dec 2017

    Posted 07 Jun 2018 in reply to Stefan Link to this post

    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?

  9. Eduardo
    Eduardo avatar
    6 posts
    Member since:
    Dec 2017

    Posted 07 Jun 2018 in reply to Eduardo Link to this post

  10. yogesh
    yogesh avatar
    1 posts
    Member since:
    Sep 2020

    Posted 11 Sep 2020 in reply to Stefan Link to this post

    Hello Stefan,

    It works with jquery. Anything for Angular version?

     

    Thanks

  11. Anton Mironov
    Admin
    Anton Mironov avatar
    137 posts

    Posted 14 Sep 2020 Link to this post

    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/.

Back to Top