I'm using Angular JS sticky directive to stick the header of a table to the top of the page when scrolling. The table is located in a bootstrap container with a fixed width and when the Angular script activates it shows the whole header and thus overlapping the container in which it is located (if I have enough columns in the table that is).
When I have more columns than what can fit in the container, I get an horizontal scrollbar but this doesn't apply to the sticky header.
Anyone who might know how to fix this? I can't show you any live examples as I don't know how to add Angular directives in fiddle (or any other online compiler).
Here are two screenshots.
This one shows how the container prevents some columns to be shown as the table is wider than the container itself: https://i.stack.imgur.com/jhYaG.jpg
This one shows how the sticky header has overlapped the container: https://i.stack.imgur.com/J7dQ0.jpg
it should not overlap
I'm sorry that I can't give a working demo of it but I simply don't know how to include the Angular JS Directive and without it, a demo would be useless.
EDIT
The problem, I found out, is that the sticky directive sets the position to fixed, which fixes the position to the browser, not to any parent. I don't know how to solve it still but maybe that explains the problem better for everyone.
