[Feature Request] Setting to remove scrollbar in thumbnail view

[neo-js]

The scrollbar in the thumbnail view is totally unnecessary and only limits the ability to see all of the thumbnails on a large screen. I wouldn't mind if it was removed entirely but at least an option to disable it would be preferred. I've tried to handle it with a custom CSS rule but it causes the click handler to break.

[AlUlkesh]

This is... surprisingly complicated.

I tried what feels like a million things today to get it to work, but in the end I failed 😞

1. Checked the gradio parameters, nothing to be found there
2. Changing the maxHeight on the class or the element via css or javascript either does nothing or prevents clicking on the thumbnails (which you also noticed)
3. Tried the javascript solution in multiple iterations, javascript started through gradio, javascript and all kinds of listeners/observers, ...
4. Finally went to the gradio repo to see, what is going on here. Which was even more confusing until I realized I was looking at gradio 3.17, while we are running 3.16.
5. Installed 3.17 to see if that behaves better and... this broke everything. Went back to 3.16
6. The furthest I got was to make it look like it should and react on clicks. But the next view was completely messed up then.

Maybe, you can get it to work by changing the installed gradio repo, but that would be extremely hacky and might break other extensions.

[neo-js]

Yeah, it looked really odd and core to gradio. I was hoping you had more insight into it than I did as I haven't ever worked with the library. But I get it if it's too hard to change. I'll keep looking at it myself and let you know if I find anything as I learn Gradio it's self.

Thanks for looking into it though.

[AlUlkesh]

In that case I'll leave a few pointers here...

via Javascript to the correct element:

    let gallery = gradioApp().getElementById(tabname + '_image_browser_gallery');
    let containerClass = gallery.querySelector('.overflow-y-auto');
    containerClass.style.maxHeight = 'none'

relevant gradio 3.16 files:
https://github.com/gradio-app/gradio/blob/b1b6841b7ec10a19df0f0d8f4daa797badabe190/ui/packages/app/src/components/Gallery/Gallery.svelte#L121-L127
https://github.com/gradio-app/gradio/blob/b1b6841b7ec10a19df0f0d8f4daa797badabe190/ui/packages/app/src/components/Gallery/Gallery.svelte#L175-L180

relevant gradio 3.17 file:
https://github.com/gradio-app/gradio/blob/f37d17089d074db7776d9ca16663234648e9e3e6/ui/packages/gallery/src/Gallery.svelte#L193-L196

And one other thing I noticed, when clicking on a picture doesn't work, making the browser window smaller fixes it (?).

[neo-js]

So, I think I found a solution.

stable-diffusion-webui-images-browser/scripts/image_browser.py

Line 667 in 3f61b9f

image_gallery = gr.Gallery(show_label=False, elem_id=f"{tabname}_image_browser_gallery").style(grid=opts.image_browser_page_columns)

Just need to add height="auto" to the style parameters.

image_gallery = gr.Gallery(...).style(grid=opts.image_browser_page_columns,height="auto")

Though it shouldn't take much to make that an option in the opts array and set on the settings page. None is the default, which becomes a fixed height.

I have that hacked into my code at the moment and it seems to be working well. Only issue I see if that if there are very few images in the gallery the preview, once clicked on, doesn't resize the gallery to larger. Though I suspect that could be fixed with css now that the fixed height isn't limiting the click handler. But I haven't tested that yet.

[AlUlkesh]

Doesn't seem to work for me. With this option, clicking on a thumbnail does nothing again. Did you change anything else?

[bryanray]

oh my....i wish it would work

[shawhu]

height="auto" only works for row count <=3. If we have more rows, it wont work. which I do...
A dirty fix is setting height = 600. It's not what I usually do but as a quick hack, it works for me and my 4k monitor (x150 scale)

image_gallery = gr.Gallery(show_label=False, elem_id=f"{tab.base_tag}_image_browser_gallery").style(grid=opts.image_browser_page_columns,height=600)

It's not a fix, and I hope that you guys can come up with something more appropriate.

[AlUlkesh]

I would take a dirty fix.

Unfortunately that doesn't work for me. It's the same symptom, clicking on a thumbnail does nothing.

This is with 5 columns, fullpage browser on 1920x1080.

However, if I make the browser window smaller, it starts working when about half-size. I have no idea what the connection with window size could be.

[AlUlkesh]

This issue got fixed on the Gradio side. To try it out you'll need Gradio >=3.36.0, the current version is 3.39.0.

The main a1111 branch is still running on 3.32.0.

So you can either wait until a1111 gets updated or if you want to try it out before that, change the version number in requirements.txt and requirements_versions.txt.

Activation via settings, as usual: