Issue for using the sticky-header and fixed column plugins together
Huangzc88 opened this issue · 2 comments
Bootstraptable version(s) affected
1.22.6
Description
When using both the fixed column and sticky-header plugins simultaneously, when scrolling down the vertical scroll bar and reaching a point where the header column is fixed at the top of the visible window, then click on a column header to sort and scroll back up the browser's vertical scroll bar, two headers will appear, with an abnormal extra header still fixed at the top of the screen.
This issue seems to occur only when both plugins are used together. I don't have this problem when using the sticky-header plugin alone.
Example(s)
https://live.bootstrap-table.com/code/Huangzc88/17854
Possible Solutions
No response
Additional Context
No response
Sorry, please ignore the double header issue mentioned above. I found that there was a problem with the order of use. After testing, I found that if the reference of the sticky-header plugin is placed before the reference of the fixed-columns plugin, this issue will not occur. It is recommended to add a document description of the reference order between plugins to avoid unnecessary problems.
At the same time, I still found another issue when using two plugins at the same time: the header and the content columns are not aligned.
Please see the following example：
It appears that the save demo data is not effective for the two plugins selected at the same time; only one is saved. You can manually reselect these two in my demo and test again.
https://live.bootstrap-table.com/code/Huangzc88/17863
The test results are as follows:
After setting the last column on the right as a fixed column, when the table header is stickily fixed at the top, there is a misalignment issue between the column header and the content.