2 questions on layout

[retsyo]

Question 1

for example, an editor is created, in which the buttons lie on the top. For nice looking and ease of use, the seperator should run accross from left to right, and all spare space should be used by textarea. But the following gives a short seperator and small textarea. So the question are how to set :

1. seperator expand along x-axis
2. textarea expand along x and y a-axis

thanks

from nicegui import ui

with ui.column():
        with ui.row():
            ui.label("open")
            ui.icon('File Open', color='primary').classes('text-5xl')

            ui.label("save")
            ui.icon('save', color='primary').classes('text-5xl')

        ui.separator()
        input = ui.textarea(label='Text', placeholder='start typing')

ui.run(native=True)

[retsyo]

question 2

what if I want the label's font size, icon size scale accroding to window size; but at the same time, they should keep a minimal size if the window is shrink too small?

[falkoschindler]

Hi @retsyo!

Question 1

That's a bit tricky. I ended up adjusting the main content container to fill the screen vertically. This can be done using ui.query to select the element with class name "nicegui-content".

Furthermore I added a custom CSS definition to have the q-field__control element inside the QInput fill the vertical space. Otherwise the textarea itself wouldn't grow with its container.

# let the main content container fill the screen and prevent wrapping
ui.query('.nicegui-content').classes('h-screen no-wrap')

with ui.row():
    ui.label("open")
    ui.icon('File Open', color='primary').classes('text-5xl')

    ui.label("save")
    ui.icon('save', color='primary').classes('text-5xl')

ui.separator()  # now the separator fills the width

# define some custom CSS to make the textarea fill the height of the QInput component
ui.add_head_html('<style>.large-textarea .q-field__control { height: 100%; } </style>')
input = ui.textarea(label='Text', placeholder='start typing').classes('w-full h-full large-textarea')

Question 2

You can use CSS functions like max to use the maximum value of, e.g., 12 points and 5 percent of the view height:

ui.label("Hello world!").style('font-size: max(12pt, 5vh)')

[olivierdd]

Hello

By adding w-full to the row and the textarea elements you will achieve the desired output:

from nicegui import ui

with ui.column().classes('w-full'):
        with ui.row():
            ui.label("open")
            ui.icon('File Open', color='primary').classes('text-5xl')

            ui.label("save")
            ui.icon('save', color='primary').classes('text-5xl')

        ui.separator()
        input = ui.textarea(label='Text', placeholder='start typing').classes('w-full')

ui.run(native=True)