Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #98891

    I want the scroll buttons that are in the header to be hidden and only when i hover over the element to see them. Is this possible ? If it is please share a code snipped to demonstrate how to do that.
    Thank you!


    Hi john1987,
    in order to control the visibility of the scroll buttons inside the header section of the element you simply need to changed the <b>overview</b> property to ‘hidden’. When you want to see the buttons again just set the value of the property back to it’s default value ‘auto’. Here’s how to do it:

            window.onload = function () {
                var tabs = document.querySelector('smart-tabs');
                tabs.addEventListener('mouseenter', function (event) {
                    this.overflow = 'auto';
                tabs.addEventListener('mouseleave', function (event) {
                    this.overflow = 'hidden';
            <smart-tab-item label="TAB 1">Content 1</smart-tab-item>
            <smart-tab-item label="TAB 2">Content 2</smart-tab-item>
            <smart-tab-item label="TAB 3">Content 3</smart-tab-item>
            <smart-tab-item label="TAB 4">Content 4</smart-tab-item>
            <smart-tab-item label="TAB 5">Content 5</smart-tab-item>
            <smart-tab-item label="TAB 6">Content 6</smart-tab-item>
            <smart-tab-item label="TAB 7">Content 7</smart-tab-item>
            <smart-tab-item label="TAB 8">Content 8</smart-tab-item>
            <smart-tab-item label="TAB 9">Content 9</smart-tab-item>
            <smart-tab-item label="TAB 10">Content 10</smart-tab-item>
            <smart-tab-item label="TAB 11">Content 11</smart-tab-item>

    If you have further questions feel free to ask.
    Best Regards,
    Smart HTML Elements Team

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.