Utilizing the Angular JS sticky directive, I am attempting to affix the header of a table to the top of the page during scrolling. The table resides within a bootstrap container with a fixed width. However, when the Angular script kicks in, the entire header is displayed, overlapping the container if it contains numerous columns.
If the number of columns exceeds the container's capacity, a horizontal scrollbar appears, but the sticky header does not adhere to this overflow.
Does anyone have a solution for this issue? Unfortunately, I cannot provide live examples as I am unsure how to integrate Angular directives into platforms like Fiddle or any other online compiler.
Here are two screenshots for reference:
The first illustrates how the container restricts some columns from being fully visible due to the table's wider dimensions: https://i.sstatic.net/jhYaG.jpg
The second showcases the problem where the sticky header has encroached upon the container bounds: https://i.sstatic.net/J7dQ0.jpg
It is imperative that there be no overlap between the header and the container.
I apologize for the absence of a functional demo, as I lack the knowledge on how to include the Angular JS Directive. Without it, any demonstration would be ineffective.
EDIT
An observation reveals that the issue lies with the sticky directive setting the position to fixed, thereby locking it relative to the browser window rather than a parent element. Although a solution remains elusive, this insight may help shed light on the problem for others.