JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ScrollBar › Blazor usage
Tagged: blazor component, blazor scrollbar, blazor server-side scrollbar, blazor wasm scrollbar, scrollbar blazor example
- This topic has 3 replies, 2 voices, and was last updated 3 years, 5 months ago by admin.
-
AuthorPosts
-
July 11, 2021 at 11:40 pm #102034xyzzyMember
Hi,
There’s not much documentation on using the ScrollBar in Blazor – this is all I could find:
<pre class=”prettyprint prettyprinted”><span class=”tag”><ScrollBar</span> <span class=”atn”>Value</span><span class=”pun”>=</span><span class=”atv”>”50″</span><span class=”tag”>></ScrollBar></span>
<div>
<div>
<div>
<div><span class=”pln”>@code {</span>
<div>
<div>
<div>
<div><span class=”pln”>}</span></div>
</div>
</div>
<div></div>
<div>I need vertical and horizontal scroll bars around a div that scrolls the contents of the div. How do I achieve this (code below)?</div>
</div>
<div></div>
</div>
<div></div>
<div><ScrollBar Orientation=”Horizontal” Id=”horizontal” Style=”width:100%; position:inherit; bottom:0px;” OnChange=@Horizontal_Change></ScrollBar>
<ScrollBar Orientation=”Vertical” Id=”vertical” Style=”height:100%; position:inherit; right:0px;” OnChange=@Vertical_Change></ScrollBar>
<div id=”scrollableContainer”>
<BECanvas Width=@CanvasWidth Height=@CanvasHeight @ref=”CanvasRef”></BECanvas>
</div></div>
</div>
</div>
</div>
<div></div>
<div>
<div>
<div>
<div>The scroll bars are there, but moving the scroll bar has no effect.</div>
<div></div>
<div>How do I pick up the scroll offset in the event handlers and apply it to the div? The following throws an exception:</div>
<div></div>
<div>void Horizontal_Change(Event eventObj)
{
string offset = eventObj[“Detail”].Value.ToString();
}</div>
</div>
<div></div>
<div>Finally, could you add a method to Hide a toolbar instead of just Disabled?</div>
<div></div>
<div>Thanks</div>
</div>
</div>July 11, 2021 at 11:44 pm #102035xyzzyMemberHi,
Let’s try that again…
There’s not much documentation on using the ScrollBar in Blazor.
I need vertical and horizontal scroll bars around a div that scrolls the contents of the div. How do I achieve this (code below)?</div>
<ScrollBar Orientation=”Horizontal” Id=”horizontal” Style=”width:100%; position:inherit; bottom:0px;” OnChange=@Horizontal_Change></ScrollBar>
<ScrollBar Orientation=”Vertical” Id=”vertical” Style=”height:100%; position:inherit; right:0px;” OnChange=@Vertical_Change></ScrollBar>
<div id=”scrollableContainer”>
<BECanvas Width=@CanvasWidth Height=@CanvasHeight @ref=”CanvasRef”></BECanvas>
</div>
The scroll bars are there, but moving the scroll bar has no effect.
How do I pick up the scroll offset in the event handlers and apply it to the div? The following throws an exception:
void Horizontal_Change(Event eventObj)
{
string offset = eventObj[“Detail”].Value.ToString();
}
Finally, could you add a method to Hide a toolbar instead of just Disabled?
ThanksJuly 13, 2021 at 7:52 am #102048adminKeymasterHi xyzzy,
The scrollbars are components which work just as sliders. They fire events when the scroll thumb is moved or the scroll arrow is clicked.
To apply a scroll position to HTML Elements, you can refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/July 16, 2021 at 9:46 am #102060adminKeymasterExample with Scrollbar that changes DIV tag using Smart.Blazor 9.4.15
Here is a sample built with Smart.Blazor 9.4.15@page "/"<Example Name="ScrollBar"> <ScrollBar @ref="scrollbar" OnChange="ChangeHandler"></ScrollBar> <div style="@scrollStyle"> Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here Some text content here </div></Example>@code { ScrollBar scrollbar; string scrollStyle = "overflow: auto; width: 100px; height:100px;"; private void ChangeHandler(Event args) { ScrollBarChangeEventDetail detail = args["Detail"] as ScrollBarChangeEventDetail; scrollStyle = "overflow: auto; width: " + detail.Value + "px; height: " + detail.Value + "px;"; Console.WriteLine(detail.OldValue + "/" + detail.Value); }}
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.