equal_height is not propagated to components in columns

[freddyaboulton]

Describe the bug

If you have a row with columns, the equal_height property of the row is not propagated down to the components within the columns.

I suspect this will be tricky to solve as there can be nested rows within rows and it's not clear that the top-level equal_height property should always take precedence.

For context, the use case here is wanting to control the relative width of components (only possible via gr.Column(scale=...) as far as I know), as well as making sure they have equal heights.

CC @ola13

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

import gradio as gr

with gr.Blocks() as demo:
    with gr.Row().style(equal_height=True):
        with gr.Column(scale=4):
            gr.Dropdown(choices=['a', 'b', 'c'], interactive=True)
        with gr.Column(scale=8):
            gr.Slider(interactive=True)

demo.launch()

Screenshot

Logs

-

System Info

Gradio 3.18.0

Severity

annoying

[stevewalker-de]

+1 Any update on this?

[hunterssl]

+1 I'm new to Gradio, is there any solution?

[abidlabs]

Not at the moment @hunterssl @stevewalker-de. Please feel free to share your code snippets and we might be able to suggest a workaround.

[atesgoral]

I worked around the vertical alignment issues by giving certain elements elem_ids and applying custom CSS.

For example:

custom_css = """
    #image-upload {
        flex-grow: 1;
    }
    #params .tabs {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    #params .tabitem[style="display: block;"] {
        flex-grow: 1;
        display: flex !important;
    }
    #params .gap {
        flex-grow: 1;
    }
    #params .form {
        flex-grow: 1 !important;
    }
    #params .form > :last-child{
        flex-grow: 1;
    }
"""

with gr.Blocks(css=custom_css) as iface:
    with gr.Row():
        with gr.Column():
            image_upload = gr.Image(
                label="Product image",
                type="pil",
                elem_id="image-upload"
            )
        with gr.Column(elem_id="params"):
            with gr.Tab('Prompts'):
                positive_prompt = gr.Textbox(
                    label="Positive Prompt: describe what you'd like to see",
                    lines=3,
                    value=DEFAULT_POSITIVE_PROMPT
                )
                negative_prompt = gr.Textbox(
                    label="Negative Prompt: describe what you want to avoid",
                    lines=3,
                    value=DEFAULT_NEGATIVE_PROMPT
                )

Can get you this:

[shreyanmitra]

@abidlabs Any update on this?

[abidlabs]

Hi @shreyanmitra we are currently thinking through the best way to implement this. In particular @aliabid94 will work on a solution or provide a workaround. Hard to know exactly how long it will take, but I am hoping in the next few weeks.

[abidlabs]

We have a PR to fix this (#9577), although I'm not sure it will always produce the more desirable UI. For what its worth, this limitation:

For context, the use case here is wanting to control the relative width of components (only possible via gr.Column(scale=...) as far as I know), as well as making sure they have equal heights.

is no longer a limitation as all components can take a scale parameter

[abidlabs]

Closed via #9577