I’ve just recently implemented Isotope into my site to allow filtering of some elements (I’ve used it before but not with Bootstrap 4).
I’m having some problems with the tab spacing when filtering.
On load the padding is correct but if you select any of the filters the padding changes due to the page scrollbar disappearing, and then padding is only re-calculated when you click the filter again.
Below I’ve put together a quick Codepen to demonstrate my problem:
Steps to reproduce:
- On load, observe that all tabs are visible (blue, orange and yellow), and a vertical, page scrollbar is present - if not, please resize the window so that the preview area is small enough to show a scrollbar.
- Click on a filter button (“Web”, “Graphics” or “Photo”)
- Observe that the padding between the tabs is different than the on-load version
- Click on the same filter button again (e.g. if you click on “Web” before, click it again).
- Observe that the tabs shift and the original padding is applied.
- Optional: click “All” and note that the padding is correct without any additional clicking being needed.
As I say I believe this is related to the scrollbar appearing/disappearing - is there any way around this?
Reproducible in all latest versions of Chrome, Firefox & Edge.
Thanks in advance and let me know if you need any further information!