When entering multiple lines of text in a height limited gr.TextBox, it will jump to a few lines before.

[Nancis1130]

Describe the bug

I use the Textbox() component and limit its height with CSS. When there are already multiple lines of text in the Textbox, typing Chinese again will cause the component to jump a few lines ahead. I tested Japanese and English input, and the performance of Japanese and Chinese was consistent, while English was normal.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

css = "#output-container {height: 110px; font-size:0.8rem !important}"

with gr.Blocks(css = css) as demo:
    chatbot = gr.Chatbot()
    with gr.Row():
        audio = gr.Audio(source='microphone', type='filepath', scale=1)
        text = gr.Textbox(lines = 2, elem_id="output-container", scale=3)
        sub = gr.Button('submit', scale=1)

demo.launch()

Screenshot

No response

Logs

No response

System Info

gradio==3.25.2
os: centOS 7
browser：Chrome
inputting method: Microsoft

Severity

I can work around it

[Nancis1130]

https://github.com/gradio-app/gradio/assets/68219213/fd13b422-173c-4a49-a9d1-ead6a9b6320d

[Nancis1130]

This video is not fully displayed, perhaps need to download and view it.

[abidlabs]

Hi @Nancis1130 I can't see the video at all. Can you try uploading it again?

Also, we don't recommend using custom CSS to set the height. Can you use the max_lines parameter instead?

[Nancis1130]

Thank you for your reply @abidlabs , sorry for the video cannot be fully displayed, so I uploaded a gif.

I tried using the max_lines parameter, but this issue still occurs, it seems that limiting the height of the Textbox will cause this issue. As shown in gif, when there are multiple lines of text in the Textbox and Chinese is added, the display of the component jumps to the beginning of the line (or a few lines, depending on the number of existing lines). When typing in English, this issue will not occur.

[hannahblair]

Hi @Nancis1130! Thanks for raising this issue.

I've just tried reproducing this bug. Setting a height on the component definitely has undesirable side effects on the cursor so I would avoid this approach.

However, removing the height you set in .style() and only using the max_lines parameter (as @abidlabs suggested) to control the height of the input seems to work for me.

See here:

Working demo:

import gradio as gr

css = "#output-container {font-size:0.8rem !important}"

with gr.Blocks(css = css) as demo:
    chatbot = gr.Chatbot()
    with gr.Row():
        audio = gr.Audio(source='microphone', type='filepath', scale=1)
        text = gr.Textbox(lines=2, elem_id="output-container", scale=3, max_lines=2)
        sub = gr.Button('submit', scale=1)

demo.launch()

Let me know if you have any issues with that!

[hannahblair]

Hi @Nancis1130! I'm going to go ahead and close this issue as we can't reproduce it ourselves, but if this is still a problem for you on the latest version of Gradio then let us know and I'll reopen the issue. 🙂