Remove scrollers in dataframe

[angelica-ignateva]

hey all,

trying to remove scrollers from the data frame. Is they a way?

seems they're displaying by default. tried css, styling, max_height... all didn't work out

[abidlabs]

Hmm I can't repro, but it may be your OS settings, can you try OS-specific instructions to hide scrollbars? For example, if you are on a Mac, https://discussions.apple.com/thread/3882122?sortBy=rank

[angelica-ignateva]

and if i'm on windows?

[abidlabs]

Try this maybe? https://www.tenforums.com/tutorials/103061-turn-off-automatically-hide-scroll-bars-windows-10-uwp-apps.html

[angelica-ignateva]

not working, still having scrollers

[abidlabs]

This is happening for all dataframe-related demos? E.g. do you see scrollbars when you open this Space: https://huggingface.co/spaces/gradio/matrix_transpose?

This is what I see:

[angelica-ignateva]

yep, i see the scrollbars

seems it's something from windows, as changing the browser doesn't help

according the link you sent, tried to turn off the "always show scrollbars" toggle here, didn't work out

and went to registry editor, but there is no "DynamicScrollbars" folder...

[abidlabs]

Yeah that's weird, we'll see if we can reproduce this on a Windows computer.

[yvrjsharma]

I can confirm the scrollbars appear on a windows 11 machine with the latest gradio sdk 5.20.1.

Code:

import numpy as np
import gradio as gr

def transpose(matrix):
    return matrix.T

demo = gr.Interface(
    transpose,
    gr.Dataframe(type="numpy", datatype="number", row_count=5, col_count=3, show_fullscreen_button=True),
    "numpy",
    examples=[
        [np.zeros((3, 3)).tolist()],
        [np.ones((2, 2)).tolist()],
        [np.random.randint(0, 10, (3, 10)).tolist()],
        [np.random.randint(0, 10, (10, 3)).tolist()],
        [np.random.randint(0, 10, (10, 10)).tolist()],
    ],
    cache_examples=False
)
demo.launch()

However, I can remove these scrollbars using this CSS. Please note that this CSS is sourced from Claude:

# More comprehensive CSS to remove all scrollbars
custom_css = """
/* Hide scrollbars for Chrome, Safari and Opera */
.gradio-container *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Hide scrollbars for IE, Edge and Firefox */
.gradio-container * {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}

/* Fix potential overflow issues while ensuring content is still accessible */
.gradio-container [data-testid="table"] {
  overflow: hidden !important;
}

.gradio-container .gradio-dataframe {
  overflow: hidden !important;
}

/* Target additional selectors that might contain scrollbars */
.gradio-container .table-wrap {
  overflow: hidden !important;
}

.gradio-container .scroll-container {
  overflow: hidden !important;
}

/* Handle any fixed height elements that might trigger scrollbars */
.gradio-container .fixed-height {
  max-height: none !important;
}
"""

Before applying css:

After applying css:

[angelica-ignateva]

wow, it works! thanks @yvrjsharma