[Feature Request] Shift Internal Scrollbar to Root of Page

[shaneholloman]

Hi there. Firstly, this extension is a personal favourite and is a fantastic way to track and keep assets organised with docs attached. Well done

I have forked this to allow me to restyle the cards to match the extra network styling and some extra tidbits. The item currently out of my skill scope is I'd like to remove the scroll bar. I find it a hindrance to viewing when there is a handful of images and docs

Cheers, again fantastic. I hope you keep this alive

[CurtisDS]

There shouldnt be a second scroll bar. So Im a bit confused. Can you post a screenshot and tell me what browser you are using?

[shaneholloman]

Ah, yes you are totally right, I should say the scrollbar has moved inside the page rather than at the root of the page

somehow the scrollbar is shifted inside the page:

vs this which allows a page scroll to show more images:

[shaneholloman]

If it's a plava to deal with, maybe you could let me know what block the scrollbar is in (file and line number) and I'll make it a learning experience : ). I'm a DevOps engineer with no python chops

[CurtisDS]

So i have good news and bad news.

Good news, I now understand what youre asking for
Bad news, Its a "plava" to deal with lmao
Good news, you can remove the inner scroll bar from most preview pages by deleting these lines from the style.css file:

Lines 2-4:

sd-model-preview-xd/style.css

Lines 2 to 4 in d0e3d6b

	.gradio-container > .flex > div.mx-auto.container {
	display: flex;
	}

Lines 31-37:

sd-model-preview-xd/style.css

Lines 31 to 37 in d0e3d6b

	#tab_modelpreview_xd_interface > div {
	position: absolute;
	top: 5px;
	bottom: 5px;
	right: 5px;
	left: 5px;
	}

However, I dont suggest you do that.

I would suggest you create a user.css file in the root of your a1111 folder and just add this css to negate what those lines are doing:

.gradio-container > .flex > div.mx-auto.container {
	display: block;
}

#tab_modelpreview_xd_interface > div {
	position: relative;
	top: unset;
	bottom: unset;
	right: unset;
	left: unset;
}

Otherwise it'll cause issues if you do a git pull. But I also dont know what you got going on with your forked code so, ill leave that up to you.

Unfortunately (this might not apply to you) some more bad news is that doing this will pretty much break the ability to use HTML preview files. Because they are rendered in iframes the html doesn't know what height to set the div at, which is why I changed the UI to use flex layouts instead of block. This allowed me to set the area for the iframe to be everything south of the tab bar... but I didnt realize on wide screens like yours... or where you have multiple rows of tabs... that space gets pretty cramped.

So if you do make this change you may also want to add some CSS to set the height of the iframes to something reasonable like 800px. There will be a second scroll bar that is rendered inside the iframe but there is nothing you can do about it. Unless you set the height of the iframe to a value which is greater than what the contents need... but... there isn't really a good way to handle that and keep it responsive.

I did some thinking today but couldn't get to a solution that felt good. So ill do some more thinking and maybe figure something out. But for now, if you don't use HTML preview pages, I would add that CSS to your user.css file and that should solve your problem.

Example of hard coding the iframe height to a fixed value so that HTML preview files are still somewhat usable:

#tab_modelpreview_xd_interface iframe {
	height: 800px;
}

[shaneholloman]

Excellent solution to show full cards - mardown docs render at the bottom of the page too.

So I'm stoked

I added this to my user.css file

.gradio-container > .flex > div.mx-auto.container {
	display: block;
}

#tab_modelpreview_xd_interface > div {
	position: relative;
	top: unset;
	bottom: unset;
	right: unset;
	left: unset;
}

Pages render thusly:

[shaneholloman]

If you add a sponsor link happy to send a small one time donation for your help @CurtisDS

[CurtisDS]

Thank you for your offer. I've set up a sponsor link for Patreon. If you are interested in making a one-time donation, after you become a patron you will have to edit your pledge and cancel the automatic renewal to avoid being charged every month. A tad annoying but it was the easiest way for me to set something up. Thanks again for your support.

[shaneholloman]

Thank you for your offer. I've set up a sponsor link for Patreon. If you are interested in making a one-time donation, after you become a patron you will have to edit your pledge and cancel the automatic renewal to avoid being charged every month. A tad annoying but it was the easiest way for me to set something up. Thanks again for your support.

done. sorry it's small, but I'm not employed right now, but still wanted to recognise your time

[TFWol]

Thank you for your offer. I've set up a sponsor link for Patreon. If you are interested in making a one-time donation, after you become a patron you will have to edit your pledge and cancel the automatic renewal to avoid being charged every month. A tad annoying but it was the easiest way for me to set something up. Thanks again for your support.

done. sorry it's small, but I'm not employed right now, but still wanted to recognise your time

I've gone and done the same, thanks for looking into our requests.

[CurtisDS]

Thank you for the support. I was not expecting it, but I do appreciate it

[CurtisDS]

I have added a setting to display the preview tab like you wanted. It works for everything except for .html previews because those use iframes and that complicates things, but for those the setting will fall back to the standard display that fills the browser window instead of limiting it to a little 300px tall element like my previously suggested workaround.

To get this setting update and then you'll want to go into settings and uncheck this box to make it display the way you like:

And remove the previous CSS styles that you added to your user.css file.

[shaneholloman]

Very cool! Nice work