ui.log inside ui.tabs doesn't stick to bottom after switching tabs

[pandabearcodes]

Hi!

I added to a discussion a while ago - #3909
Which resulted in issue #5112

As the issue was closed, i went right ahead to try it, and as expected, it works like a charm. Thank you very much! 💖

However, I do have a follow up to this. When i have a setup in which a ui.log is placed within a ui.tabs structure, this stickiness is lost after switching between tabs:

from nicegui import ui
import time

with ui.left_drawer().props('width=200').classes('bg-secondary'):
        with ui.tabs().props('vertical').classes('w-full') as tabs:
            one = ui.tab('One')
            two = ui.tab('Two')

with ui.tab_panels(tabs, value=one).classes('w-full'):
    with ui.tab_panel(one):
        log = ui.log().classes('w-full h-30vh')
    with ui.tab_panel(two):
        ui.label('nicegui is my favorite.').classes('text-2xl')

def write_log():
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')

ui.timer(0.5, write_log, active=True)

ui.run()

In the above example, ui.log starts off sticking to the bottom, i switch to 'Two' - back to 'One', and we are set at the top.

With some help from Copilot I was able to work around this by adding a manual override like this:

from nicegui import ui
import time

def scroll_log_to_bottom():
    ui.run_javascript(f'''
        setTimeout(function() {{
            var log = document.querySelector("#log");
            if (log) log.scrollTop = log.scrollHeight;
        }}, 100);
    ''')

def on_tab_change(e):
    if e.value == "One":
        scroll_log_to_bottom()

with ui.left_drawer().props('width=200').classes('bg-secondary') as left_drawer:
        with ui.tabs().props('vertical').classes('w-full') as tabs:
            one = ui.tab('One')
            two = ui.tab('Two')

with ui.tab_panels(tabs, value=one).classes('w-full'):
    with ui.tab_panel(one):
        log = ui.log().classes('w-full h-30vh').props('id=log')
    with ui.tab_panel(two):
        ui.label('Nicegui is my favorite.').classes('text-2xl')

def write_log():
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')

ui.timer(0.5, write_log, active=True)
tabs.on_value_change(lambda e:on_tab_change(e))

ui.run()

This would need to be expanded upon to save the last position and/or if it was scrolled to the bottom, but it works in general.

Now I was just wondering if the current behavior is expected, and/or if this is something that would deserve a nicegui way of handling it.

Love,
panda

[falkoschindler]

Hi @pandabearcodes,

Sorry for keeping you waiting for so long, but we've been quite busy with the 3.0 release.

I can confirm that the log doesn't stick to the bottom anymore after switching tabs. This is probably because its Vue update method isn't called as long as it isn't visible, so our stick-to-bottom solution doesn't work.

@evnchn Since PR #5112 was your contribution, maybe you have an idea how to fix it for logs in tabs?

[evnchn]

I want to rest until at least 16 Oct (said this on Discord)

No it did not happen due to the @ I guess. #5220

[falkoschindler]

This problem has been fixed in PR #5632 and just released in version 3.6. ✔️