JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Forms & Editors ScrollBar ScrollBar Show-Buttons Attribute is Confusing

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Hristofor 1 year, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100537
    Avatar
    ctstrist
    Participant

    Hey there,

    I am confused by the Show-Buttons attribute.

    if I have a scroll bar in my html, it is impossible to not show the buttons without additional javascript to select the scroll bar object and explicitly set the value to false.
    <pre class=”prettyprint prettyprinted”><span class=”tag”><smart-scroll-bar</span> <span class=”atn”>show-buttons</span><span class=”tag”>></smart-scroll-bar> results in the buttons being shown
    as does:
    </span> <span class=”tag”><smart-scroll-bar</span><span class=”tag”>></smart-scroll-bar> by default</span>
    are there any plans to create a Hide-Buttons attribute?

    Am I misunderstanding how the scroll bar works?
    <pre class=”prettyprint prettyprinted”><span class=”tag”> </span>
     

    #100541
    Avatar
    Hristofor
    Participant

    Hi ctstrist,

    the showButtons property which controls the visibility of the scroll buttons of the scroll bar is by default set to true. The only way to change it to false is to set it dynamically via javascript. However an alternative approach is to change the size of the buttons via the CSS variable and avoid using javascript. Using the --smart-scroll-button-size you can set their size to 1px which is the minimum and the buttons will not be visible, like so:

    
    #myScrollBar {
     --smart-scroll-button-size: 1px;
    }
    

    Also there’s an issue with your code snipped:
    </span> <span class=”tag”><smart-scroll-bar</span><span class=”tag”>></smart-scroll-bar> by default</span>.

    The span tag with class ‘tag’ encloses the opening tag of the ScrollBar but it should not. No content should be added between the opening and closing tags of the Scroll bar. The valid approach would be:
    <span class=”tag”></span><span class=”tag”><smart-scroll-bar></smart-scroll-bar> by default</span>

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.