Tab Size

[chrsBlank]

Question

Hi, i was wondering how to set the size of tabs.

with ui.tab_panels(tabs, value='Home'):
    with ui.tab_panel('Home'): ...
    with ui.tab_panel('Statistics'): ...

and the size is like that

and on mobile it uses the whole screen

and this is without tabs ( on mobile still uses the whole screen )

how can i set the tab size?

[phoskee]

I think you could solve it by setting the width of ui.tab_panels

with ui.tab_panels(tabs, value='Home').style('width: 100%'):

This element uses the class q-tab-panels q-panel-parent which seems not to include width: 100%

[chrsBlank]

nice, that solved my issue, thank you, thought i still have the buttons side by side instead of stacked like without the tabs.
sorry for the 'pretty easy' questions, i dont have much expirience with front end design etc

[phoskee]

Without your code I cannot help you, within the limits of my skills
But, I think you can achieve the goal with this:

with ui.column():
    ui.button(text='Button1')
    ui.button(text='Button2')
    ui.button(text='Button3')