Can gradio add a vertical scrollbar to the textbox?

[yiya1989]

• [x] I have searched to see if a similar issue already exists. https://github.com/gradio-app/gradio/issues/6977 But this issue has been closed

Is your feature request related to a problem? Please describe.
When my text is too lang, it's hard to view all the txt because the Textbox has no vertical scrollbar .

Describe the solution you'd like
Add a vertical scrollbar to the left Textbox.

Additional context
Like this issue said: Add a scrollbar to notebook/default textboxes

[abidlabs]

Hi @yiya1989 you should already be able to scroll the textbox if it grows too long. The scrollbar is not needed and from a design perspective, we've opted out of adding it by default. If you'd like to add it, I'd suggest using custom css, as was done in the linked PR: https://github.com/oobabooga/text-generation-webui/commit/6afc1a193bb1d68deccd569c89d70ee9bf35246c

[yiya1989]

Hi @yiya1989 you should already be able to scroll the textbox if it grows too long. The scrollbar is not needed and from a design perspective, we've opted out of adding it by default. If you'd like to add it, I'd suggest using custom css, as was done in the linked PR: oobabooga/text-generation-webui@6afc1a1

@abidlabs Hello! When the txt is 50 lines and the Textbox limit max 20 lines, it is useful to just scroll the textbox as the default. But when the txt lines reach to 500 lines, It's necessary to has a vertical scrollbar. Can we has a default vertical scrollbar which can control by a switch default False? Just like current github textbox editor, it also has the vertical scrollbar.

[umarbutler]

+1

[bryanlan]

+1

[ROBERT-MCDOWELL]

is there any progress on this topic? I'm building a simulated terminal and scrollbar is a must. an attribute like show_scrollbar=True or else. is anyone has a temporary solution? thanks in advance

[avan06]

As far as I know, starting from version 3, Gradio's textbox no longer displays a scrollbar. I'm not sure why they insist on this—perhaps it's for aesthetic reasons? When the content is only a few dozen lines, the presence or absence of a scrollbar doesn't really matter. But when dealing with hundreds of lines, having a scrollbar makes a big difference.

Below is my solution, which also uses CSS to handle it.

css = """
textarea[rows]:not([rows="1"]) {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}
textarea[rows]:not([rows="1"])::-webkit-scrollbar {
    all: initial !important;
    background: #f1f1f1 !important;
}
textarea[rows]:not([rows="1"])::-webkit-scrollbar-thumb {
    all: initial !important;
    background: #a8a8a8 !important;
}
"""

with gr.Blocks(css=css) as demo:
...

This CSS modifies the default style of multi-line textareas.

[yiya1989]

As far as I know, starting from version 3, Gradio's textbox no longer displays a scrollbar. I'm not sure why they insist on this—perhaps it's for aesthetic reasons? When the content is only a few dozen lines, the presence or absence of a scrollbar doesn't really matter. But when dealing with hundreds of lines, having a scrollbar makes a big difference.

Below is my solution, which also uses CSS to handle it.

css = """ textarea[rows]:not([rows="1"]) { overflow-y: auto !important; scrollbar-width: thin !important; } textarea[rows]:not([rows="1"])::-webkit-scrollbar { all: initial !important; background: #f1f1f1 !important; } textarea[rows]:not([rows="1"])::-webkit-scrollbar-thumb { all: initial !important; background: #a8a8a8 !important; } """

with gr.Blocks(css=css) as demo: ... This CSS modifies the default style of multi-line textareas.

yes, we can only add css to support scrollbar, but it's more convenient to has a an attribute like show_scrollbar=True.

[ypzpro]

I strongly agree with @yiya1989 . Adding a vertical scrollbar to the Textbox component would greatly enhance usability, especially when handling large volumes of text.

[ROBERT-MCDOWELL]

+1