Gui blocks layout misaligned
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?image1547×611 37.3 KBhere 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!
2022-10-13T18:38:30Z
Hi there! It looks like the combination orRows()andColumns()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])
2022-10-14T05:35:14Z
Hi@abidlabsThanks 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!
2022-10-17T05:15:04Z
Yes that’s exactly it!
2022-10-17T12:48:38Z
Thank you so much for your support!@abidlabs