custom css is not working for tabitem

[prasadkumar0590]

Describe the bug

I am using tabs inside blocks component. I want to apply bold text for tabitem. I tried that with custom css

import numpy as np import gradio as gr import os from process_file import main from PIL import Image app = gr.Blocks(theme=gr.themes.Monochrome(),css=".feedback {font-size: 36px;color:red;}")

FILE_PATH = os.path.join(os.path.dirname(file),'test/')

def test(x,y): im = Image.fromarray(x) im.save(FILE_PATH + "random.jpg") detections = main(FILE_PATH + "random.jpg") return [gr.Image.update(FILE_PATH + 'test.jpeg'),gr.Dropdown.update(choices=list(detections.keys())),gr.Tabs.update(selected=1)]

def drpd_change(x): return gr.Image.update(FILE_PATH + f'{x}_x.png')

with app: gr.Markdown("# Test Image") with gr.Tabs() as parent_tabs: with gr.TabItem("Home", id=0, elem_classes="feedback"):
with gr.Tabs() as tabs: with gr.TabItem("Input Image", id=0): with gr.Row(): image_input = gr.Image()
with gr.Row():
image_button = gr.Button("Start Test")

            with gr.TabItem("Test Image",id=1):
                with gr.Row():
                    image_input1 = gr.Image().style(height=300) #FILE_PATH + 'test.jpeg'
                    drpd = gr.Dropdown()
                with gr.Row():
                    gr.Label('Detected Image')
                    image_input3 = gr.Image().style(height=300)
                    # image_input2 = gr.Image(FILE_PATH + 'test.jpeg')
    with gr.TabItem("About", id=1, elem_classes="feedback"):  
        gr.Label('About Page')

image_button.click(test, inputs=[image_input],outputs=[image_input1, drpd, tabs])
drpd.change(drpd_change,inputs=drpd,outputs=image_input3)

app.launch()

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

no

Screenshot

No response

Logs

no logs

System Info

latest gradio app

Severity

blocking all usage of gradio

[abidlabs]

Hi @prasadkumar0590 could you please format your code correctly so that we can try running your code? Here's what I see:

[prasadkumar0590]

tabitem.docx

Hi @abidlabs please find the attached formatted code file for your reference

[abidlabs]

Hi @prasadkumar0590 when using custom CSS, I recommend using the Chrome Inspector Tools to figure out which class names are being used. In this case, it turns out that you want to use the elem_classes parameter of the TabItem class. You could do something like this:

import gradio as gr

app = gr.Blocks(theme=gr.themes.Monochrome(),css="""
.feedback button.selected{
    font-size: 36px !important;
    color:red !important;
}
""")

with app:
    gr.Markdown("# Test AI")
    with gr.Tabs(elem_classes=["feedback"]) as parent_tabs:
        with gr.TabItem("Home", id=0):    
            with gr.Tabs() as tabs:
                with gr.TabItem("Input Image", id=0):
                    with gr.Row():
                        image_input = gr.Image()   
                    with gr.Row():        
                        image_button = gr.Button("Start Test")

                with gr.TabItem("Test Image",id=1):
                    with gr.Row():
                        image_input1 = gr.Image().style(height=300) #FILE_PATH + 'segemented.jpeg'
                        drpd = gr.Dropdown()
                    with gr.Row():
                        image_input3 = gr.Image().style(height=300)
        with gr.TabItem("About", id=1):  
            gr.Label("About Page")

app.launch()

which produces:

Again, for general questions like this (that are not feature requests or bug reports), please ask in GitHub Discussions or our Discord. (I'll close this issue)