AngularJs Auto Scroll Not working

7 posts, 1 answers
  1. Marc
    Marc avatar
    147 posts
    Member since:
    Sep 2016

    Posted 03 Jan 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
    671 posts

    Posted 04 Jan 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
    147 posts
    Member since:
    Sep 2016

    Posted 04 Jan 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
    671 posts

    Posted 06 Jan 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
    147 posts
    Member since:
    Sep 2016

    Posted 06 Jan 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
    671 posts

    Posted 09 Jan 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
    147 posts
    Member since:
    Sep 2016

    Posted 11 Jan 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

Back to Top