Allow gr.Chatbot to fill all height of rest of space

[liaoweiguo]

• [ * ] I have searched to see if a similar issue already exists.

I can use
chatbot = gr.Chatbot(elem_id="chatbot").style(height=600)

but it can not adapt to diff screen size

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

[dawoodkhan82]

If you remove setting a specific height, it will dynamically resize the chatbot to fit screen sizes. Try chatbot = gr.Chatbot(elem_id="chatbot") without adding style

[liaoweiguo]

If you remove setting a specific height, it will dynamically resize the chatbot to fit screen sizes. Try chatbot = gr.Chatbot(elem_id="chatbot") without adding style

I donot thing so. There is a gap between components and footer

like this

[abidlabs]

I get the same behavior as @liaoweiguo -- it looks like there's a fixed height even if no height is specified @dawoodkhan82

[liaoweiguo]

any hints?

[bent-verbiage]

+1 on this issue. For me it's actually holding back a prod release. Is there any workaround @dawoodkhan82 or @abidlabs?

[dawoodkhan82]

@bent-verbiage @liaoweiguo can you check if this pr fixes your issue? #4041

[aliabid94]

We currently do not support a concept of an element taking up the "remaining vertical space". Can you explain the scenario where this is helpful?

Your best bet would be using custom CSS. For example

CSS ="""
.contain { display: flex; flex-direction: column; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; }
"""

with gr.Blocks(css=CSS) as demo:
    chatbot = gr.Chatbot(elem_id="chatbot")
    msg = gr.Textbox()
    clear = gr.Button("Clear")

allows the chatbot to expand to fill the "remaining vertical space", though it may expand if there are more messages.

[joedavis]

We currently do not support a concept of an element taking up the "remaining vertical space". Can you explain the scenario where this is helpful?

How about accessibility? When the chatbot window grows, other elements can end up moving around, until eventually it settles at a fixed size taking up most of the screen anyway.

It's possible to minimize this motion by setting a fixed large size for the chatbot window, but obviously that doesn't take into account different screen sizes.

There's a reason that most desktop and mobile OSes have options to reduce motion.

[jsjolund]

@aliabid94: Thanks for the code.

I modified your CSS to make the ChatBot demo with buttons automatically fill the height of the viewport:

CSS ="""
.contain { display: flex; flex-direction: column; }
.gradio-container { height: 100vh !important; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; overflow: auto;}
"""

with gr.Blocks(css=CSS) as demo:
    chatbot = gr.Chatbot(elem_id="chatbot")
    msg = gr.Textbox()
    clear = gr.Button("Clear")

You can still scroll through the conversation like with the fixed size chat window.

[abidlabs]

Thanks @jsjolund and @aliabid94. Since we don't have the concept of letting components take up the full vertical space in gradio, we will defer to the CSS solutions you provided here as a workaround.

[Chrosea]

@aliabid94: Thanks for the code.

I modified your CSS to make the ChatBot demo with buttons automatically fill the height of the viewport:

CSS ="""
.contain { display: flex; flex-direction: column; }
.gradio-container { height: 100vh !important; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; overflow: auto;}
"""

with gr.Blocks(css=CSS) as demo:
    chatbot = gr.Chatbot(elem_id="chatbot")
    msg = gr.Textbox()
    clear = gr.Button("Clear")

You can still scroll through the conversation like with the fixed size chat window.

.gradio-container { height: 100vh !important; } will lock the size at 100vh with no scroll bar, when the control panels expand over 100vh, the chat message will no longer appear. Maybe remove this line?

[abidlabs]

We decided to offer a built-in solution for this. PR here: #7278

[GuokaiLiu]

Thanks for the above code. I tried to use gr.Tabs and gr.Tab with gr.Chatbot, the first code failed to fill all the height of the rest of the space. How to deal with it? Many thanks.

import gradio as gr

CSS = """
.contain { display: flex; flex-direction: column; }
.gradio-container { height: 100vh !important; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; overflow: auto;}
"""

with gr.Blocks(css=CSS) as demo:
    with gr.Tabs():
        with gr.Tab('abc'):
            chatbot = gr.Chatbot(elem_id="chatbot")
            msg = gr.Textbox()
            clear = gr.Button("Clear")

demo.launch(inbrowser=True)

import gradio as gr

CSS = """
.contain { display: flex; flex-direction: column; }
.gradio-container { height: 100vh !important; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; overflow: auto;}
"""

with gr.Blocks(css=CSS) as demo:
    chatbot = gr.Chatbot(elem_id="chatbot")
    msg = gr.Textbox()
    clear = gr.Button("Clear")

demo.launch(inbrowser=True)

[anton-b]

Since adding additional css didn't help, followed the comment in the chatbot code:

height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.
            

    with gr.Blocks() as cb:
        chatbot = gr.Chatbot(type="messages",
                             label="LoanerAI",
                             height="85vh",
                             # scale=1,
                             elem_id="chatbot",
                             autoscroll=True)