Hover scroll - Scrollable tabs always take a padding in the bottom
Hi,
I want to apply the below scrollable tab
https://preview.keenthemes.com/html/metronic/docs/base/tabs#scrollable-tabs
for the layout
https://preview.keenthemes.com/metronic8/demo1/pages/user-profile/projects.html
However, I got an issue that the scrollable tab always take a bottom padding because class hover-scroll-x has property overflow-x: scroll;
which requires more bottom space even when the width of the tab does not exceed the width of the screen.
I wonder why we don't use overflow-x: auto; so that the padding just appears when it is necessary.
Could you please suggest me to solve this problem?
Thanks
Replies (3)
Hi,
We can't use overflow auto for the hover scroll since we need the scrollbar space initially hidden to prevent the block from jumping during the height/width calculation.
May I know which version of Metronic are you using? In the recent Metronic v8.2.0, we improved the hover scroll classes to handle recent Chrome CSS Overlow behavior changes. You can also try to use overflow-auto BS class to handle it as per your requirements.
Regards.
Hi Sean,
I am using v8.2.0.
Yes, overflow-auto class seems to be able to handle it.
Thanks
Hi,
Great! Glad to hear that. If you need any further help please let us know.
All the best with your project!
Regards.
