How to Prevent Automatically Scrolling to Top After Clicking ui.link()

[happybeginning1]

Question

I have a question about behavior in NiceGUI that I can't seem to resolve. In the simplified example code below, each time I click "More...", the first line of text updates to the current time, which works well. However, each time after clicking "More...", the page automatically scrolls to the top.

Is there a way to prevent this vertical scrolling after a click?

(I would like to keep using ui.link for this functionality in my real application, so I prefer not to change that part of the implementation.)

Here's the example code:

import time
from nicegui import ui

def update_status(event):
    status.text = time.time()

status = ui.label()
status.text = 'initial'

for i in range(222):
    ui.label('some label')

ui.link("More...").on('click', update_status)

for i in range(222):
    ui.label('some label')

ui.run()

[falkoschindler]

Hi @happybeginning1,

The browser is jumping to the top, because ui.link get's a default href (link target) of "#". To avoid that, we can remove the href prop:

status = ui.label('initial')
for _ in range(100):
    ui.label('some label')
ui.link('More...').on('click', lambda: status.set_text('clicked')).props(remove='href').classes('cursor-pointer')

Note that you need to explicitly set the pointer to "cursor", because anchors without a target are usually not clickable in HTML.

[happybeginning1]

Hi @falkoschindler,

Thank you for your help. Your solution worked well to solve the problem I mentioned, and I truly appreciate it.

I have a further question and would appreciate your continued guidance. When I implement your solution in the following code, clicking the ui.link still causes the page to scroll to the top. I've observed that removing position: absolute; from with ui.tab_panels(tabs, value=summary_tab).style('position: absolute; width: 100%; left: 50%; top: 5px; transform: translateX(-50%); border: none; background-color: transparent;') resolves this issue. However, this alteration could possibly affect the original layout of my page. Could you please provide further advice on how to address this issue without changing the layout? Thank you for your guidance!

Here is the example code:

from nicegui import ui
from router import Router # copied from the example file in the official website (https://github.com/zauberzeug/nicegui/blob/main/examples/single_page_app/router.py)



@ui.page('/')
@ui.page('/{id}') 
def main():
    
    users = [{'id': '111', 'name':'user1', 'gender': 'male'},
        {'id': '222', 'name':'user2', 'gender': 'female'},
        {'id': '333', 'name':'user3', 'gender': 'male'}]
    first_user = users[0]
    
    router = Router()
    
    with ui.header(elevated=False):
        with ui.tabs() as tabs:
            summary_tab = ui.tab('summary', label='Summary', icon='o_contact_emergency')
        
        complete_list = [i['id'] for i in users]
        ui.select(
            value=complete_list[0],  # Default selection.
            options=complete_list,  # user options for selection.
            on_change=lambda e: (router.open(f'/{e.value}'))  # Navigate on selection change.
        ).classes('w-40').style('width:222px;max-height:70px;').props('outlined input-class=text-white')
        
    for _, user in enumerate(users):
        @router.add(f"/{user['id']}")
        def generate_user_page(user=user):  # Use closure to fix the current loop variable value
            with ui.tab_panels(tabs, value=summary_tab).style('position: absolute; width: 100%; left: 50%; top: 5px; transform: translateX(-50%); border: none; background-color: transparent;'):
                with ui.tab_panel(summary_tab):
                    
                    with ui.dialog() as dialog, ui.card():
                        ui.label('Hello world!')
                        ui.button('Close', on_click=dialog.close)
    
                    ui.label(f"Current user: {user['id']}").classes('text-h5')
                    ui.separator()
                    for i in range(50):
                        ui.label('haha')
                    ui.link('More...').on('click', lambda: dialog.open()).props(remove='href').classes('cursor-pointer')

    router.frame()   
    router.open(f"/{first_user['id']}")

ui.run()

[happybeginning1]

I mainly use property position: absolute; to set the width of the page content (as the first image shows).
As I've found that without this property, when the page has insufficient content, the width does not occupy the designated width and becomes narrower, making the page look unattractive (as the second image shows).

[falkoschindler]

I'm not quite sure why the frame scrolls to the top after closing the dialog...
But I suggest to remove the absolute positioning for ui.tab_panels and make sure the router frame fills the width:

router.frame().classes('w-full')

[happybeginning1]

Hi @falkoschindler, thanks for the solution. It perfectly solved this issue. Many thanks!