Gradio can't change height with the screen

Beginners
1

I use all methods to try to let the output box fit the height of screen, but it does not work. Does anyone know how to fix the problem? Thank you so much

css = “”"
.gradio-output {
height: 100% !important; # 設定訊息框的高度
width: 100% !important
overflow-y: hidden;
text-rendering: optimizeLegibility;
flex-grow: 1 !important;
overflow: auto !important;
#col { height: calc(100vh - 112px - 16px) !important; }
}

“”"

theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink,font=[gr.themes.GoogleFont(“LXGW WenKai Mono TC”)]).set(
body_background_fill=‘#FFF5EE’
)

with gr.Blocks(theme=theme,css=css) as demo:
with gr.Row():
with gr.Column(elem_id=“col”):
gr.HTML(“”"

.gradio-output{
height: 100% !important; # 設定訊息框的高度
width: 100% !important
text-rendering: optimizeLegibility; # 啟用抗鋸齒渲染
}

“”")
gr.ChatInterface(
main_pipeline,
type=“messages”,
css=css,
fill_height=True
)

2

This might a help.

# with gr.Blocks(theme=theme,css=css) as demo:
with gr.Blocks(theme=theme,css=css,fill_height=True) as demo:
3

thank you but it did not work.
qq

1 Like
4

The only other thing I can think of is this, but it’s True by default…

If you ask in the Gradio community on HF Discord, you’ll probably be able to find out something, as the developers are usually there.

fullWidth: boolean
Whether your Space is rendered inside a full-width (when true) or fixed-width column (ie. “container” CSS) inside the iframe. Defaults to true.

header: string
Can be either mini or default. If header is set to mini the space will be displayed full-screen with a mini floating header .