Gui blocks layout misaligned

🔒 Gradio
1

Hi,

any idea how to fix that button that it will fit nicely like the one above it?
Could you please tell me what I have missed?

image
image1547×611 37.3 KB

here is my code:

with gr.Blocks(title = 'Switcher') as switches_ver:
    gr.Markdown('Welcome to IPBlocker')
    with gr.Tab(label = 'IPBlocker'):
        with gr.Row():
            ips_to_block = gr.Textbox(label = "IPs", lines = 10, placeholder=('Please fill Ips to block'))
            output_textbox = gr.Textbox(label = "Results", lines=10)
        with gr.Row():
            block_btn = gr.Button('Block')
            #output_file = gr.File('fortigate.txt')
            block_btn.click(fn=block_ip, inputs = ips_to_block, outputs = output_textbox)

    with gr.Tab(label = 'Switcher'):
        with gr.Row():   
            with gr.Column():
                switch_box = gr.Textbox(label = 'Switches', lines = 10, placeholder='Please fill switches IPs...')
                show_ver = gr.Button('Show current switches version')    
            output_textbox = gr.Textbox(label='Results',lines = 10)
        with gr.Row():
            upgrade_ver = gr.Button('Upgrade selected switches')
            output_file = gr.File(['switches_good_results.txt', 'switches_bad_results.txt'])
            show_ver.click(fn=switch_ver, inputs = switch_box, outputs = [output_textbox, output_file])
            upgrade_ver.click(fn=block_ip, inputs = ips_to_block, outputs=[output_textbox, output_file])

Thank you!

2

Hi there! It looks like the combination or Rows() and Columns() is causing this issue. What happens if you have the following code for the second tab:

    with gr.Tab(label = 'Switcher'):
        with gr.Row():   
            with gr.Column():
                switch_box = gr.Textbox(label = 'Switches', lines = 10, placeholder='Please fill switches IPs...')
                show_ver = gr.Button('Show current switches version')    
                upgrade_ver = gr.Button('Upgrade selected switches')
            with gr.Column():
                output_textbox = gr.Textbox(label='Results',lines = 10)
                output_file = gr.File(['switches_good_results.txt', 'switches_bad_results.txt'])
                show_ver.click(fn=switch_ver, inputs = switch_box, outputs = [output_textbox, output_file])
                upgrade_ver.click(fn=block_ip, inputs = ips_to_block, outputs=[output_textbox, output_file])
3

Hi @abidlabs

Thanks for the reply!

Yeah, it worked! it is way simpler than I thought, I tried many combination but nothing worked for me.
Just to understand right, if I create a 2nd:

with gr.Column()

because its under the parent:

with gr.Row():

It will create that column (the 2nd) next to the first one, to its right side?

Thank you and for the community very much!

4

Yes that’s exactly it!

5

Thank you so much for your support! @abidlabs