UI Grid headers, rows, footer, and data eerily seperated from container

Question

I haven't found anything about the situation I'm experiencing with UI-Grid so I'll do my best to explain it. I'm running 3.0.0 RC20 (stable) with Bootstrap and Angular. I've had other issues with UI-Grid but the project is fairly well updated and most have disappeared.

Except this issue and I'm not sure what's going on here. It appeared a few times in certain situations where a grid would auto-resize which would cause this "jump" where the rows, header, and footer of the ui-grid would suddenly drop below the grid container for a second and then back up into the grid. It was disorienting, but I didn't have a problem with that for a site in test.

Only sometimes, the jump would cause the scroll bar in the browser window to show up. Then the rows would fall back into the grid and the scrollbar would disappear forcing the grid to redraw which would make it do the jump again which would bring back the scrollbar... you see where I'm going with this? An endless loop of small adjustments. And that was a problem.

Here is an image of what I'm talking about:

So I removed the UI-Grid-Auto-Resize reference and it stopped the endless loop, but the rows and header dropping outside the grid didn't stop (as you can see from the pic).

Even in NG-Grid (back in the day), there were issues with using 100% widths. In NG-Grid, if the grid was set to 100% width and visible = false, the grid's column widths would be set to 0 or 1px when the grid was made visible. I don't think this bug was ever fixed and I wonder if my issue is at all related to that bug.

I'm currently using the grid with 100% widths and this is the only issue I've seen so far that I haven't been able to fix.

Any suggestions, thoughts, etc... would be super helpful.

Answer 1

This issue is fixed as of 3.0.0 RC21.

The floating render containers have been changed to absolute and they now use margins to handle the positioning.