How to easily split screen into multiple sections

[steweg]

Question

Hi, is there an easy way in nicegui to split the screen into multiple separate scrollable areas (like plain-old HTML frames), where scrolling using also keys works (PgDn, PgUp..) and have variable height/width (e.g. use first top 100px for one area and the rest of the screen for another).

Background: I am trying to achieve SPA with view, where you have:

• top menu:
  • with static height definitions (e.g. 100px)
  • always visible, regardless of rest of the page content
  • with dynamically added/removed tabs
• And with main section:
  • which takes the rest of the free space
  • scrollable
  • can be further split into two parallel sections with different dynamic content depending on selected tab

So far I was able to do that with kind of combination of quite many elements (tabs + panels, scroll-areas, rows and columns...), so it seems that I am not doing it the right way. Is there some better or easy way to achieve this? I was not able to find any good example how to do that.

Thanks for any advice

[falkoschindler]

Hi @steweg,

I think it would help us and the community if you could show a minimal code example of what you already tried. And what exactly does not work? Have you looked into https://nicegui.io/documentation/section_pages_routing#page_layout?

[steweg]

I knew that I was doing something wrongly. This was exactly what I was looking for. Many thanks

[steweg]

Need to reopen this. I have tried to recreate the page using ui.header. That worked nicely, but the scrolling is not working properly. The minimum code that I can share is like this:

    def _render(self):
        with ui.header(elevated = True):
            self._ui_tabs = ui.tabs().classes('w-full')
            self._ui_tabs.props('outside-arrows align="left" inline-label')
            self._ui_tabs.style('flex: 0 1 auto')
        self._ui_tab_panels = ui.tab_panels(self._ui_tabs, animated = False).classes('w-full')
        self._ui_tab_panels.style('flex: 1 1 auto')

This works nicely for the initial page. But once I add and open tab_panel, which is bigger then the screen, the scrollbar of page is not adjusted automatically and I cannot really scroll down and access the whole content of given tab.

Just short recap:

• this is SPA application
• the tabs and tab_panels are being updated dynamically as needed
  • there are buttons in tab_panels, which effectively create/render a new tabs with content
  • other buttons then closes/destroys tabs

I have tested in:

• Firefox, where I see only the main scroll-bar, not able to scroll-down
• MS Edge, I see two scrollbars, one for the whole window, second one for the tab itself, PgUp/Down works only with the main scroll-bar
• Chrome - it behaves same as MS Edge

Any suggestion how to get to stage where there will be just one scroll-bar for whole page?

[falkoschindler]

But once I add and open tab_panel, which is bigger then the screen, the scrollbar of page is not adjusted automatically and I cannot really scroll down and access the whole content of given tab.

Can you, please, share code that reproduces this problem? Your example just shows a blank page with a blank header. Thanks!

[steweg]

After trying to manually create minimum testing code from scratch, it works correctly. I have found out, that it was actually a problem of using of the following line within my application:
ui.query('.nicegui-content').classes('h-screen p-0')

Once removed it works as it should