CODEWITHSUNDEEP
cssangularjsangular-ui-grid
Amy Blankenship
Amy Blankenship

Reputation: 6961

How to control scroll bars in Angular UI Grid

I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.

This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.

Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.

I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:

  1. Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
  2. Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
  3. Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.

Thoughts?

Upvotes: 0

Views: 1561

Answers (1)

user6083264
user6083264

Reputation: 126

How you can know if there is a vertical scrollbar : If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).

var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;

if (dataRowHeight > gridElementHeight) {
    // you have a verticalscrollbar
}
  • Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
  • Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.

Upvotes: -1

Related Questions