How to set tab label font size

[belalhmedan90]

Question

I want to adjust tab label font size:

from nicegui import ui, app
from pathlib import Path

@ui.page('/page_layout')
def create():
    
    ui.add_head_html("<style>" + open(Path(__file__).resolve().parents[3] /"static"/"css"/"tyle.css").read() + "</style>")
    
    with ui.tabs().classes('tabs-container') as tabs:
        # Define the tabs
        ui.tab("Create Program").classes('main-tab')
        ui.tab("Run Program").classes('main-tab')
    ui.run(show=False)

create()

style.css

/* Center the entire tab group */
.tabs-container {
    display: flex;
    justify-content: center; /* Centers the tabs horizontally */
    margin: 0 auto;
    font-size: 38px;
}

/* Center the tabs and increase font size */
.main-tab {
    padding: 10px 20px; /* Adds padding for better spacing */
    text-align: center; /* Centers the text inside the tab */
    cursor: pointer;
    font-size: 38px;
    transition: background-color 0.3s ease; /* Smooth background transition */
}

However tab label font size is not adjusted properly, can you please tell me how to adjust it? thanks

[falkoschindler]

Hi @belalhmedan90,

Quasar seems to define the font-size in quasar.prod.css like this:

.q-tab__label {
    font-size: 14px;
    ...
}

So you can adjust it by adding the following CSS:

.main-tab .q-tab__label {
    font-size: 38px;
}

By the way, calling ui.run inside the page function seems pretty broken. I'd suggest structuring it like this:

@ui.page('/page_layout')
def create():
    ui.add_head_html(...)
    with ui.tabs().classes('tabs-container') as tabs:
        ui.tab("Create Program").classes('main-tab')
        ui.tab("Run Program").classes('main-tab')

ui.run(show=False)

[belalhmedan90]

@falkoschindler thanks