Open Xrylite opened 7 years ago
Mottie
commented
7 years ago Hi @Xrylite!
That is very odd... for me it is only happening in Firefox. I found that if you add a small amount of padding to the outer wrapper, it seems to fix the problem (demo). I might need to include this padding in the widget code...
.tablesorter-scroller {
padding-right: 4px;
}
Xrylite
commented
7 years ago Odd is certainly one of many words to describe it~.
The padding didn't seem to work all too well for me. The quantity of pixels that the bar gets cut off will vary per browser due to the bar dimensions/style. I was able to find a better way to show the clipping. In your Fiddle (or the original), you can change the col-xs-5 to a higher number, with col-xs-12 having the strongest clipping. This goes upwards of consuming the entire bar.
In an attempt to isolate more, I was able to keep it replicated with Bootstrap removed and ultimately just two tables: https://jsfiddle.net/989p549x/4/
The effects have shifted a bit to the bar being clipped entirely, but it might just be due to the size of the frame not being limited width-wise as much. Similarly, if everything is wrapped in a div where the width is hardcoded to any pixel size, the issue will go away. This just leaves me with the assumption that the fractional/percentual width of elements/containers may be involved in the bar being thrown into the overflow.
It's worth noting that JSFiddle does appear to use percentual heights and widths and essentially cause the same effect Bootstrap does.
And, of course, thank you for following up on this!
I've ran into an issue where the Tablesorter Scroller widget is clipping (width-wise) the scrollbar that is attached to the table. I'm not entirely certain if it's a direct issue with Tablesorter or Bootstrap (or the mixture of the two). However, I have isolated my code down and was able to keep it replicated. It just seems like certain height dimensions are what causes the scroll bar to be shifted to the right and clipped.
In the fiddle below, you may need to resize the output quadrant to be higher or lower to see the effect. I've also included a few images of what I see since screen and browser resolution seems like it comes into play (768px was where I was noticing changes on my full page).
I put the break tags in the fiddle to artificially extend the height of the page. Similarly, the second table in it might be related since removing it, but adding more breaks, seems to remove (maybe?) the occurrence. The issue shows up in Opera, Chrome, Firefox, Vivaldi, and Internet Explorer.
Any ideas on what may be causing this?
https://jsfiddle.net/989p549x/