Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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


W
WilinkNet 2 years ago
Bootstrap 5 HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Sean Author 2 years ago

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.


W
WilinkNet 2 years ago

Hi Sean,

I am using v8.2.0.
Yes, overflow-auto class seems to be able to handle it.

Thanks


user
Sean Author 2 years ago

Hi,

Great! Glad to hear that. If you need any further help please let us know.
All the best with your project!

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(