This topic contains 3 replies, has 2 voices, and was last updated by Avatar admin 2 weeks, 3 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #102034
    Avatar
    xyzzy
    Participant

    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>

    #102035
    Avatar
    xyzzy
    Participant

    Hi,

    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?

    Thanks

    #102048
    Avatar
    admin
    Keymaster

    Hi 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/

    #102060
    Avatar
    admin
    Keymaster

    Example 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/

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

You must be logged in to reply to this topic.