Extra network panel missing scroll bar | 附加网络面板缺少滚动条

[anne43983959]

When the number of additional networks far exceeds the number that can be displayed on the interface, the lack of scrollbars is a fatal flaw. The specific form can refer to the Kitchen Theme（https://github.com/canisminor1990/sd-webui-kitchen-theme）, and the actual situation is shown in the figure

当附加网络数量远超界面可显示的数量时，缺少滚动条是一个致命缺陷，具体形式可以参考Kitchen Theme，实际情况如图所示

[Nevysha]

It's definitly an issue as the scroll bar should be visible. May I ask for your automatic1111's commit number, the list of your installed extension and your web browser ? Thanks

[anne43983959]

It's definitly an issue as the scroll bar should be visible. May I ask for your automatic1111's commit number, the list of your installed extension and your web browser ? Thanks

Chrome, 5ab7f21(webui), bdad16f(extension). Perhaps it's not just that the scrollbars are not visible, but rather that they are invalid. This situation has also occurred in the kitchen theme, but the failure of the kitchen theme scrollbars has only occurred in Firefox, and the developers of the kitchen theme have explicitly stated that they cannot perfectly support Firefox. I haven't found any similar statements in this extension's readme, and I haven't tried using webui again on Firefox or Edge yet.

[anne43983959]

I have to say that this is a great interface beautification extension. Although I always compare Cozy Nest with Kitchen theme, they are one of the few interface beautification extensions with satisfactory results. I really hope Cozy Nest can return to the site for better results. I am an interface translator. I have localized the interfaces of Kitchen Theme and Cozy Nest. Although the author of Kitchen Theme is Chinese like me, due to the problems of webui itself, some of its contents cannot be localized. On the contrary, all interface content of Cozy Nest can be translated well. If you wish, I can leverage my localization to promote this extension among Chinese users

[R-ES-H]

No scrollbar with Vladmantic Automatic neither, and if I drag the panel all the way to the right border I can't bring it back Edit : Ok I get it, it doesn't work with thumbs but it's ok with cards. And for the width issue I tried to deactivate everything and I reinstalled the extension but it didn't work, a simple edit of #txt2img_extra_networks_parent do the trick

[Nevysha]

@anne43983959

but the failure of the kitchen theme scrollbars has only occurred in Firefox

I'm mostly using Chrome for Auto1111 and Cozy Nest so it should work. This is how it look on my computer (with a lots of dummy Lora cards for test purpose)

If you wish, I can leverage my localization to promote this extension among Chinese users

I would be happy and proud of this !

---

@R-ES-H

No scrollbar with Vladmantic Automatic neither, and if I drag the panel all the way to the right border I can't bring it back

I did not plan to fully support Vlad fork at first but since there is so many user on it I'll consider it.

Edit : Ok I get it, it doesn't work with thumbs but it's ok with cards.

I don't understand what you mean here sorry. Can you elaborate please ?

And for the width issue I tried to deactivate everything and I reinstalled the extension but it didn't work, a simple edit of #txt2img_extra_networks_parent do the trick

I'll add a minumum size. For a workaround, those size are stored in local storage which you can edit through dev tools. It's named nevysha_extra_networks_width

[anne43983959]

@anne43983959

但厨房主题滚动条的失败只发生在 Firefox 中

我主要将 Chrome 用于 Auto1111 和 Cozy Nest，所以它应该可以工作。这就是它在我的电脑上的样子（有很多用于测试目的的虚拟 Lora 卡）

如果你愿意，我可以利用我的本地化在中国用户中推广这个扩展

我会为此感到高兴和自豪！

@R-ES-H

Vladmantic Automatic 也没有滚动条，如果我将面板一直拖到右边框，我就无法将它拉回来

一开始我并不打算完全支持 Vlad fork，但由于它有这么多用户，我会考虑它。

编辑：好的，我明白了，它不适用于拇指，但它可以用于卡片。

我不明白你在这里的意思抱歉。你能详细说明一下吗？

对于宽度问题，我尝试停用所有内容并重新安装扩展程序，但它没有用，#txt2img_extra_networks_parent 的简单编辑就可以解决问题

我将添加一个最小尺寸。作为解决方法，这些大小存储在本地存储中，您可以通过开发工具对其进行编辑。它的名字是nevysha_extra_networks_width

Indeed, it only applies to cards, and the scroll bar will become invalid when using thumb, but cards are not very compatible with Civitai Helper extensions, especially after zooming in and out of the preview image, the control icons of Civitai Helper will not display properly, as shown in the following figure.

[R-ES-H]

My setting "Default view for Extra Networks" was left on "thumbs" instead of "cards", but thumbs are useless now and everything is fine with cards

[R-ES-H]

@anne43983959 Indeed, it only applies to cards, and the scroll bar will become invalid when using thumb, but cards are not very compatible with Civitai Helper extensions, especially after zooming in and out of the preview image, the control icons of Civitai Helper will not display properly, as shown in the following figure.

I like CivitAI helper a lot but a version 2 is on its way and the current one is getting obsolete But I made this CSS for much more compact cards

/*Small Cards*/

.actions, .actions ul, .actions li, .actions a, .actions .name {
    font-size: var(--nevysha-text-md) !important;
    margin: 0px !important;
    padding:0.1em !important;
    flex-wrap: wrap;
    line-height: 1em;
    text-align:center
}
.actions li a, .actions li {display:block; list-style:none;}
.card {margin:0 !important; }
.actions .name { max-height:3.3em; overflow:auto; }
.actions .name:hover, .actions a:hover {filter: brightness(1.3);}
.actions .name::-webkit-scrollbar {display:none;}

For very long names, over 3 lines, it's scrollable, I can't manage to cut them after the underscores though, but it still a WIP and I didn't test it a lot

[Nevysha]

Looks good ! You may have to rely on JS to cut the name.

[anne43983959]

Looks good ! You may have to rely on JS to cut the name.

May wish to change the way of thinking, just add the function of resizing the preview image in real time to eliminate the impact of long file names. Usually the super long file name is to record keywords, and the real file name only has the first few characters. The most important function of the additional network panel is not to look at the file name, but to find the model based on the preview image and update the preview image. It doesn't matter if you use Civitai Helper or not, as long as the button to update the preview is not blocked. When using the Kitchen theme, resizing the preview image in real time does solve this problem, but the Kitchen theme has other compatibility issues with Civitai Helper, so it is not a perfect solution.

[Nevysha]

@R-ES-H I've added your css snippet as temp fix. It will be in the next merge.

@anne43983959 sorry but it's still not very clear to me :S .

[anne43983959]

@R-ES-H I've added your css snippet as temp fix. It will be in the next merge.

@anne43983959 sorry but it's still not very clear to me :S .

https://user-images.githubusercontent.com/115604775/236974235-4158d0bb-db3a-4e4d-bf63-2cb59fe79349.mp4

[R-ES-H]

@anne43983959

Ok I think I understand, I never used the description function yet, I can just hide them in the cards .description {display: none; !important} should do the trick

[ostap667inbox]

More screenshots of the unit with the scrolling rafts sliding down outside the screen.

1. One problem is related to the Civitai helper extension, which adds its own button and because of this it calculates incorrectly the remaining height to the bottom of the block.

2. The second problem is related to the case when there is a list of subdirectories. This list is actually meaningless, if you look closely, in my case there are subdirectories with example pictures to models. I remove it through AdBlocker. But when it is - its height is not taken into account, too. In this screenshot, because of the large block of subdirectories, the list of tiles is shifted down very much and the last two rows of tiles are inaccessible.

[R-ES-H]

@ostap667inbox I have this height problem too but it changes with the width, I don't really get it, i can check it (I'm not a dev or a webdesigner though, I'm learning) Did you get this directories structure through Civitai Shortcut ? I like the folders list but I don't have one for each model, I make my own. There's the Model Organizer extension too now, it's getting complicated.

@Nevysha Also I have this new CSS with scrollable description but it needs more tests, I forgot the line-break:anywhere, now the names should be on multiple lines

/*Small Cards*/

.card {margin:0 !important; }
.actions, .actions ul, .actions li, .actions a, .actions .name {
    font-size: var(--nevysha-text-md) !important;
    margin: 0px !important;
    padding:0.1em !important;
    flex-wrap: wrap;
    line-height: 1em;
    text-align:center
}
.actions li a, .actions li {display:block; list-style:none;}
.actions a:hover{ font-weight: bolder; }
.actions .name { max-height:3.3em; overflow:auto; line-break:anywhere !important;}
.actions .name:hover, .actions a:hover {filter: brightness(1.3);}
.actions .description {text-align: left; max-height: 1em !important;}
.actions .description:hover {max-height: var(--extra-network-card-height) !important; line-height:1 !important; overflow:auto;} 
.actions .name::-webkit-scrollbar, .actions .description::-webkit-scrollbar {display:none;}

[anne43983959]

Looks good ! You may have to rely on JS to cut the name.

It seems that the issue of replacing the preview image and scrolling bars has been resolved now, but the preview image is missing and cannot be displayed

[R-ES-H]

@anne43983959

That's weird, what extensions are you using ? I don't know from where this ⓘ comes from

[fsilveiradev]

I'm using chrome, gradio: 3.28.1, sdwebui [5ab7f213] and Cozy Nest [v2.0.3].

When [Settings>Extra Networks>Default view for Extra Networks] = thumbs, the scrollbar doesn't appear.

When [Settings>Extra Networks>Default view for Extra Networks] = cards, the scrollbar appears, but the maximum height overflows the page to contain all cards (if you zoom out enough, you can drag the scrollbar limit upwards to match the container).

I can provide images if needed. Edit: I do not use Civitai Helper.

[virtuafashion3d]

Looks really nice, however i'm facing the same bug on chrome and firefox, the scrollbar isn't displayed for the external networks (Lora, lycoris,Textual invertion, etc.) my list is cut out and i cannot scroll up or down... I cannot use the mouse scroll wheel as well, nothing happens. Hope it can be solved or if it is not a bug maybe a list of conflicting extension(s) or script(s) with this extension can be added. The search box still works just fine.

Thank you very much for trying to identify the problem and or /fix it if someone find how to do...

[virtuafashion3d]

Don't know if it helps but ... i can see the scrollbar on top left corner of the additional network slide panel view. It's frozen but here. I tried to play with google console CSS but of course nothing seems to react. i framed it on the screencap (this is my LyCoris view.

[fsilveiradev]

Don't know if it helps but ... i can see the scrollbar on top left corner of the additional network slide panel view. It's frozen but here. I tried to play with google console CSS but of course nothing seems to react. i framed it on the screencap (this is my LyCoris view.

That scrollbar is for the directories (i.e. the subfolder structure used to organize models). Since all your models are in the base folder, it doesn't show anything and the scrollbar have no fuction. Try adding a model to a subfolder and refresh the list to see how it works. That scrollbar at least is working as intended.

The scrollbar for the cards is located to the right, but is not working properly: if you zoom out the page enough (ctrl+mouse wheel down) you will se the limit of the scrollbar at the end of the zoomed out list of cards. If you drag that up the scrollbar will show up. I'm not good at CSS so I couldn't find any way to make it adjust to the card window height.

[virtuafashion3d]

Thank you very much for clarification, i hopE the main scrollbar bug can be fixed as your plugin is a must have in my opinion. I will try to tip you as soon as i can. Keep on going on this one for the sake of better arts

[virtuafashion3d]

Alright.... i might found a temporary fix (as i have almost no idea of what i'am doing...) but the CSS fix seems to work on my end.

I have tested on chrome and firefox (latest), under a PC (windows 10) and it is a desktop (not tested on a tablet or a smart phone). My screen is HD resolution (1920x1080)

Here is the .css fix:

.gradio-container-3-23-0 .prose :last-child { margin-bottom: 0 !important; max-height: 700px !important; }

=> 'max-height: 700px !important;'

it is working when i'm adding the above line at the '.gradio-container-3-23-0 .prose :last-child' class

Note : the '!important' isn't necessary but untill we found a better fix... it may helps to stay in place.

I will see if i can record my screen to share what i did.

Hope it will helps !

[virtuafashion3d]

I screen captured on my end, here is the link of the video on MEGA.

https://mega.nz/file/WctVTbqQ#p-3GS7ruq97N14rMMjWGSqfkhTCtQjNodM9SYFcos5Y

Edit : on the video you might see also i'm having hard time to grab the scroll bar when it is reduced to 2 columns wide. In that case, the mouse scroll wheel works just fine. Maybe this is happening because of Googletools console opened. Not sure of that. Sometimes when google console is opened it brings extra disturbances on the screen...

another thing, i don't know how to transpose this fix into your code.... iOi..

[Hilurex]

still no solution about scroll bar? since I also suffer from it

[Nevysha]

I got it working on Firefox rn. Maybe you should update to last a1111 version

[maus-me]

Here is a working workaround for Brave/Chromium browsers on the latest available patch, it also fixes the issue of the card box being incredibly short...

[id$="_cards"] {
    overflow: scroll !important;
    flex-wrap: wrap;
}

.extra-network-cards {
    height: calc(100vh - (200px));

}

[anne43983959]

@anne43983959

That's weird, what extensions are you using ? I don't know from where this ⓘ comes from

This is not a button from any extension, it is a button that A1111 has long added to the attached network panel to view LoRA metadata. It will still exist when all extensions are closed, as mentioned in A1111's update log before

[R-ES-H]

@anne43983959 Yes I realized I haven't this anymore with the Vladmandic fork, and I'm not using Auto1111 or Cozy Nest these days

[Raivshard]

Here is a working workaround for Brave/Chromium browsers on the latest available patch, it also fixes the issue of the card box being incredibly short...

[id$="_cards"] {
    overflow: scroll !important;
    flex-wrap: wrap;
}

.extra-network-cards {
    height: calc(100vh - (200px));

}

This one isn't working for me, either. No scroll bars at all in extra networks, and no mousewheel scrolling either. The entire thing tries to display at once. Almost kinda-sorta partly visible if you zoom out as much as possible. Definitely not an acceptable state of affairs.

[Nevysha]

Hey, Just so you know, you can disable the extra network tweaks for now. As quite a lot of people face issue with it and I have difficulties to identify the root cause I made an settings (in "Others") to keep extra network as without Cozy Nest

[Raivshard]

Okay, so I disabled extra network tweaks, but now all the cards display behind the rest of the page. Everything that's not blocked is selectable, but that still leaves a lot of content unavailable.

[Raivshard]

my temporary workaround is to reduce the size of the cards a bit, and then split up the larger category folders into subfolders. this lets me access everything

[Nevysha]

I just released a big update including potential fix for Extra Networks (I hope...) Please test and tell me if it works ! (v2.2.0)

[ostap667inbox]

I just released a big update including potential fix for Extra Networks (I hope...) Please test and tell me if it works ! (v2.2.0)

It works :) There is new Issues:

1. with global font size. Changing the font size no longer works. Even after saving it, it's 12 by default.
2. With Civitai Helper icons. They are gone and no longer appear on the cards, even after pressing the blue 'refresh' button.

All this on Vlad's fork and official A1111

[Nevysha]

Font size should be fixed now

[R-ES-H]

I have my custom css for SD.next and CivitAI Helper (and other things, maybe I'll make a small fork)

Most of this part still works but it needs some clean-up with the last updates

/* ------------------- */
/* Extra networks */
/* ------------------- */

[id$="_extra_networks_parent"] {
    position: fixed;
    z-index: 9999;
    width: 75vw;
    right: 0px;
    height: 100vh !important;
    top: 0px !important;
    padding: 0px !important;
    margin-bottom: 10vh;
}

[id$="_extra_networks_nevysha_wrapper"] {
}

[id$="_extra_networks"] {
}

[id$="_extra_tabs"] {
}

[id$="_extra_tabs"] > .tab-nav {
    display: flex;
    flex-wrap: wrap;
    height: 80px;
    background-color: #transparent !important;
    padding: 0;
}

[id$="_extra_tabs"] > .tabitem {
/*     height:100vh !important;
    overflow-y: auto !important; */
}

[id$="_subdirs"] {
}

[id$="component"] {

}

[id$="_cards"] {
    /* Center the cards, add a padding for the zoom, set a correct height*/
    padding: calc(var(--extra-network-card-height) * 0.1) !important;
    overflow: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    max-height: calc(100vh - 110px)!important;
    min-height: var(--extra-network-card-height)!important;
/*     height: calc(100vh - 110px)!important; */
/*     resize:vertical !important; */
    overflow-y: scroll;
    display: flex;
    align-content: flex-start;
}

/* put the CivitAI Helper and Vladmatic functions in order */

.extra-networks .tab-nav {

}

.extra-networks .tab-nav button {
    order: 1;
    padding: 0 0.5em 0 0.5em;
    height: 2em
}

.extra-networks .tab-nav .search {
    width: auto;
    align-self: auto;
    height: 2em !important;
    padding: 0.3em !important;
    margin: 0px 0px 0px 10px !important;
    order: 2;
}

#txt2img_extra_refresh, #txt2img_extra_close, #img2img_extra_refresh, #img2img_extra_close {
    align-self: auto;
/*     height: 1em !important; */
    margin: 0px !important;
/*         padding: 0 !important; */
    order: 2;
}

button[title="Refresh Civitai Helper's additional buttons"] {
    order: 2!important;
    padding: 0 !important;
    font-size: 140% !important;
    height: 1.4em !important;
}

[id$="description_input"] {
    order: 3;
}

[id$="description_input"] textarea {
/*     overflow-y: scroll; */
height: 2em !important;
}
[id$="description_input"] textarea:hover, [id$="description_input"] textarea:focus {
    overflow-y: scroll;
    height: 150px !important;
    z-index: 99999;
}

/*reduce the height of the folders list and make it scrollable */

.extra-network-subdirs {
    min-height:  0px;
    height: 1.2em;
    line-height: 1em;
    overflow: scroll !important;
    padding: 0 !important;
    margin: 0 !important;
}

.extra-network-subdirs::-webkit-scrollbar {
    display: none;
}

.extra-network-subdirs button {
    padding: 0px !important;
    margin: 0px 0.2em 0px 0px !important;
}

.extra-network-subdirs button:hover {
}

/* Some effects on the cards */
.extra-network-cards .card {
    box-shadow: inset 0 0 calc(var(--extra-network-card-width) * 0.2) calc(var(--extra-network-card-width) * 0.1) rgba(0, 0, 0, 0.5) !important;
    margin: 1px !important;
}

.extra-network-cards .card:hover {
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1.5));
    box-shadow: inset 0 0 calc(var(--extra-network-card-width) * 0.2) calc(var(--extra-network-card-width) * 0.1) rgba(255, 255, 255, 0.3);
    transform: scale(1.2);
    z-index: 999;
}

/* Small and clean links on cards */
.actions, .actions ul, .actions li, .actions a, .actions .name {
    flex-wrap: wrap;
    line-height: 1em;
    text-align: center;
    font-size: var(--nevysha-text-md) !important;
    margin: 0px !important;
    padding: 0.1em !important;
}

.actions li a, .actions li {
    display: block;
    list-style: none;
}

.actions a:hover {
    font-weight: bolder;
}

/* Scrollable name on 3 lines */
.actions .name {
    max-height: 3.3em;
    overflow: auto;
    line-break: anywhere !important;

}

.actions .name:hover, .actions a:hover {
    filter: brightness(0.3);
    filter: saturate(0%) !important;
}

/* Auto expand descriptions */
.actions .description {
    text-align: left;
    max-height: 1em !important;
}

.actions .description:hover {
    overflow: auto;
    max-height: calc(var(--extra-network-card-height) * 1.45) !important;
    background-color: #0009;
    line-height: 1 !important;
    font-size:80%;
    text-align: left;
    padding: 0.2em;
}

/* Remove scrollbars */
.actions .name::-webkit-scrollbar, .actions .description::-webkit-scrollbar {
    display: none;
}

[Nevysha]

those class are not used anymore

[R-ES-H]

Here's how it looks so far on my computer with only this css added to index.js

But CivitAI Helper may be dead for good, it works on hypernetworks only