- This topic has 1 reply, 2 voices, and was last updated 4 years, 11 months ago by .
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.
JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ScrollBar › ScrollBar Show-Buttons Attribute is Confusing
Tagged: angular scroll bar, custom element, scroll bar buttons visibility, show buttons scroll bar, smart elements, smart framework, web component, web components
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>
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