I'm new to NiceGUI, and I'm tying to build on the modular example. I have moved the theme.py file up a directory because I plan on reusing it with multiple applications. The problem that I'm having is that when I add multiple components to a page (I'm testing with the class_example.py file) the first and last components are partially hidden by the header and footer. For my testing, I've added multiple components to the class_example.py file that I plan on using in an app. I've included my theme.py file contents below.
from contextlib import contextmanager
from menu import menu
from side_menu import side_menu
from nicegui import ui
@contextmanager
def frame(navigation_title: str):
"""Custom page frame to share the same styling and behavior across all pages"""
ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
with ui.header(elevated=True):
ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')
ui.space()
ui.label(navigation_title)
ui.space()
with ui.row():
menu()
with ui.column().classes('absolute-center items-center'):
yield
with ui.left_drawer().classes('bg-blue-100') as left_drawer:
side_menu()
with ui.footer().style('background-color: #3874c8'):
ui.label('Test Footer')
I tried changing the ui.column.classes value from 'absolute-center items-center' to 'items-center' in the template.py file. This corrected the issue of the header and footer covering part of the other components, but now the components are not centered in the ui.column. I would like to keep everything in the ui.column centered and prevent components from being covered by the header and footer.
This was an issue with the Tailwind CSS included in the example. The following changes fixed the issue:
Old:
with ui.column().classes('absolute-center items-center'):
New:
with ui.column().classes('mx-auto max-w-md items-center'):