Doesn't work horizontal virtual scroll

[ArMikael]

Hi guys, For some reason horizontal vs is not working for me. I see all directive's inserts like $vs_collection in DOM, but when I also see there all 200 items instead of 10-12 that I expect to see there. Please, give me some ideas, maybe I missed something.

 <ul class="permissions-list" id="permissionsList" vs-repeat vs-horizontal>
      <li class="role-item" ng-repeat="permission in vs.permissions" 
           ng-init="vs.showRole[permission.index] = true" ng-show="vs.showRole[permission.index]" 
           on-finish-render="ngRepeatFinished">
          <div class="role-item-cell role-item-header">{{permission.role}}</div>
          <div class="role-item-cell">{{permission.index + 1}}</div>
          <div class="role-item-cell">{{permission.monitoring}}</div>
          <div class="role-item-cell">{{permission.dashboard}}</div>
          <div class="role-item-cell">{{permission.configuration}}</div>
          <div class="role-item-cell">{{permission.userManagement}}</div>
          <div class="role-item-cell">{{permission.overrideMasking}}</div>
          <div class="role-item-cell">{{permission.mediaExport}}</div>
       </li>
</ul>

[stefchri]

Could you add a fiddle/codepen? Could have something to do with the css.

[ArMikael]

Sure. I added codepen with my code here: http://codepen.io/ArMikael/pen/qRKmov Thanks for your answer.

[stefchri]

Definitely css related. What is the idea of all the vanillajs resizing? Try to strip the code, avoid using display inline block for the vs repeat container and don't specify a set width for the repeat.

[ArMikael]

The idea is show all roles with all permissions. Administrator can select which roles' permissions to show by choosing specific roles on the right side panel. The issue is that some clients has up to 10,000 roles and list of permission is growing up with each new version. We expect scrolls in both axes - X and Y. Probably we don't need virtual scroll for Y-axis with permissions' names, but we do need it for the list of roles and current status of each permission/role. So we need to support virtual horizontal scroll. We need both scrolls on the same container for both X and Y. It's impossible to do in a standard way, because on scrolls will be at the end of list and will be available after scrolling to the end. That's why we need dynamic width with vanilla JS.

What is the idea of all the vanillajs resizing?

It allows us to check how many roles do we have, sum the overall width and create clone of horizontal scroll outside of the container. We actually make original scroll hidden and putting his clone under the container. Such changes allows to user to scroll in both axes in comfortable way.

avoid using display inline block for the vs repeat container and don't specify a set width for the repeat.

I use inline block for vs-repeat parent container and on list items (li) and vs-repeat is on ul. I've tried to remove inline block from parent container but it doesn't help.

[ArMikael]

Hi Kamil,

Can you explain please what I'm doing wrong?

avoid using display inline block for the vs repeat container

How can I ignore inline-block for horizontal scroll? If I not define li as inline-blocks they are all goes vertical, not horizontal.

avoid using display inline block for the vs repeat container and don't specify a set width for the repeat.

Even if I remove display: inline-block and width from li virtual scroll is still doesn't works in my case.

Can you give me some recommendations how to fix it?