0

I have a component which contains a form. When the component is opened on a small browser screen the form becomes scroll-able to allow the user to fill in the mandatory fields on the form.

For example say that the form was for a new product. Once the form is completed the user clicks the save button and the component is closed. However when the user clicks the 'add a new product' button which opens the 'new product' component it opens at the bottom of the form. It basically has opened as it was closed.

As a temporary solution I added an arrow icon at the bottom of the page which takes the user to the top of the page when clicked. This uses anchors to go to an element which I gave an id of topOfPage. For one thing this changes the URL which I dislike and secondly it looks very bad.

I tried to implement a Navigateto when the component is opened but it moves the background page NOT the component.

This is what I have:

    <div class="headingBackground headingLine" id="topOfPage">
                            <h1 class="heading">Add product</h1>
                            <p class="headingText">Please fill out this form with the required information</p>
                        </div>

                        <div class="formSegment">
                            <h4>Product Information</h4>
//contents of form


 <a class="TopOfPage" href="/products#topOfPage" target="_top" title="Top of form"><i class="fa-solid fa-arrow-up-long"></i></a>

what I have tried:

 public void Open(int ID)
    {
        NavigationManager.NavigateTo("/products#topOfPage");
      

        ModalDisplay = "block;";
        ModalClass = "Show";
        StateHasChanged();
    }

    private void Close()
    {
   NavigationManager.NavigateTo("/products#topOfPage");
     
        ModalDisplay = "none";
        ModalClass = "";
        StateHasChanged();
    }

I've tried navigating in both the close and open methods and neither are taking me to the top of the form popup component.

I think that the anchor is targeting the 'top' so this is going to the correct place. Can you do this with NavigationManager?

Imogen
  • 85
  • 13

0 Answers0