Render new view to top of page

Anvil Q&A
1

Hi all: I’m trying to 1) link to a new page or 2) replace a component on a page with a new component.

I get to the new or updated page fine. However, the page does not render to the top of the page. Instead, it basically goes to the middle of the page, so from a usability perspective it really is unacceptable.

Code for the button-based link that replaces a panel on my main page with a new panel:

  def take_learning_screener_2_click(self, **event_args):
    """This method is called when the button is clicked"""
    # Clear the content panel
    self.main_panel.clear()
    # Add ILA Consent to the content panel
    self.main_panel.add_component(ILA_Consent())

I suspect I’m missing something really basic and simple here. Is there a command that essentially says ‘render to top of page’ or something like that?

2

From what you’ve said, and I might be wrong, your page is staying scrolled to the wrong point?

In your form_show or at the end of your create component set a component to: self.component.scroll_into_view(smooth=True)

That might help, but I may have misunderstood the ask!!

1 Like
3

It’s not clear what’s happening or what you want to happen. Do you have a clone link that demonstrates it? Or a screenshot? The visual will help folks understand what’s happening, because the code you posted is fine as far as it goes.

4

Thank you so much, and sorry for the delay in response.
When I’m running my app within Anvil, I see the button I want to click to advance to the next page.

I’ve attached a screenshot showing how the new page served up does not render to the top of its page (which should include the logo).

no logo on new page
no logo on new page1920×1080 108 KB

I would be happy to share with you any other information you request.

Thank you,
Drew Carson

5

Maybe I’m just being dense, but I’m still not sure what you want to have happen that isn’t happening. Your screenshot looks normal. You’re scrolled down in the page, so you’re not seeing the top of the form, but otherwise it looks like every Anvil app I’ve written that uses a main form.

6

I think what is happening is when a new form is loaded in to the content panel, the scroll position for the new form shows the previous forms scroll position?
I have fixed this in one my apps by using some JavaScript but I think there might be an easier way by setting a scroll_into_view() for a component at the top of each form in the forma show event.

I am not at a computer ATM but can create a clone later

2 Likes
7

Yes, scroll into view will sort it. I started using Alpha, Beta, Live tags as the first component on a page and that always gives you a good scroll point for shifting content. Use it loads.

1 Like
8

I know this topic is a year old now but I just ran into the same issue as @drew.carson. Namely, a component added to a form was weirdly scrolled to the middle of the page on load instead of being scrolled to the top. What fixed this for me was the following:
image
Going through the “Show” event I added this:

def column_panel_1_show(self, **event_args):
      # To scroll the whole page to the top; smooth scrolling not supported this way
      anvil.js.window.scrollTo(0, 0)

Hope this helps

2 Likes
9

This is really helpful, many thanks!