Anyway to hide/scale the buttons below Generate?

[giteeeeee]

The empty area marked red wastes so much space. Is there a way to hide or downscale the buttons marked green? So that the UI will auto collapse, shrinking the empty area.

[Gerschel]

I don't know how your ui is showing like that. My buttons don't ever cascade in to another line, no matter what size I put my window, this is with testing for responsive test. This is not an issue with the default app, even your buttons use an icon that is non-standard. You have something installed or a modification that is changing that.
Try disabling all you other extensions and check your user.css file.

This is with me scaling the ui down all the way to just before some phone sizes. This never happens, even with text in the fields. Notice how your button is not blue, while the default one in mine is. Something you have is changing this.

[giteeeeee]

That's interesting. I'm not sure what's causing it in yours, but it looks like the generate button is smaller. This is the size I have for txt2img and img2img generate button.

You can try a stylesheet from @Nacurutu https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111 It works along with the extension I put together to make it easier to swap stylesheets. I havent updated it in a bit. We have some changes that are waiting for me to get to. https://github.com/Gerschel/sd-web-ui-quickcss

I don't know if he handles size, he might not, but it's worth a shot.

Try going into the projects root folder, there will be a file, user.css, this file is intended for you to add some changes on top of the defaults.

I bet you, the issue lies in an extensions stylesheet overriding, or an extension altered you user.css when they shouldv'e used the sheet in the extensions directory.

Try adding a min-width to the generate buttons directly.

#txt2img_generate, #img2img_generate {
    min-width: min(120px, 100%)
}

That's interesting. I'm not sure what's causing it in yours, but it looks like the generate button is smaller. This is the size I have for txt2img and img2img generate button.

You can try a stylesheet from @Nacurutu https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111 It works along with the extension I put together to make it easier to swap stylesheets. I havent updated it in a bit. We have some changes that are waiting for me to get to. https://github.com/Gerschel/sd-web-ui-quickcss

I don't know if he handles size, he might not, but it's worth a shot.

Try going into the projects root folder, there will be a file, user.css, this file is intended for you to add some changes on top of the defaults.

I bet you, the issue lies in an extensions stylesheet overriding, or an extension altered you user.css when they shouldv'e used the sheet in the extensions directory.

Try adding a min-width to the generate buttons directly.

#txt2img_generate, #img2img_generate {
    min-width: min(120px, 100%)
}

Ummm, where is "user.css"? I couldn't find it in the stable-diffusion-webui root directory. All I can find is a "style.css". Maybe it's this outdated config file that's been causing me issues?
Thanks for the help btw.

[Nacurutu]

@giteeeeee user.css must be created... you can copy one of the styles @Gerschel mention and rename it to user.css; then paste the file inside the webUI root folder. Also, remember to activate the dark mode on the arguments for the user.css file @Gerschel mentioned takes effect.

However, I recommend you to install the quickcss extension, it is easy to use.

If you are going to use the extension, you don't need to put any file on the root folder, you can activate the theme from the extension. But you still need to activate the dark mode argument on your webui-user file

[giteeeeee]

@giteeeeee user.css must be created... you can copy one of the styles @Gerschel mention and rename it to user.css; then paste the file inside the webUI root folder. Also, remember to activate the dark mode on the arguments for the user.css file @Gerschel mentioned takes effect.

However, I recommend you to install the quickcss extension, it is easy to use.

If you are going to use the extension, you don't need to put any file on the root folder, you can activate the theme from the extension. But you still need to activate the dark mode argument on your webui-user file

OK thanks for the input. I have no idea why I didn't have the user.css in the first place. Have been using the gitpull command.

[Nacurutu]

@giteeeeee user.css is not included in the repo, is your own user.css file you need to use. that's why there is no user.css

Everyone can create their own user.css file. Or use someone's user.css. It is just a custom style for the webUI

[Gerschel]

@giteeeeee Foremost, your issue is with the buttons starting on a new row. It appears it's because the row width is being dependent on the width of the generate button.

I think the best action would be to investigate why, like why is your "read parameters" button not showing as blue, when that icon is literally a unicode character (this one could be based on your system fonts, or can be because of a stylesheet from an extension), and why is the generate button not following the stylesheet that gets downloaded with a git pull.

To help you be able to investigate, here's how the webui handles stylsheets.
There are several tiers of stylesheets going on in this system. Stylesheets (css files), cascade. Css stands for cascade stylesheets.
This means that rules in a single sheet can cascade, affect from outer to inner elements, also, newest rules override older rules (new/old, aka seen first or seen last in the file).

But there can be more than one stylesheet declared, one after the other, and the same rules apply as if they were one long stylesheet.

Gradio has it's own stylesheets that it will load, for the main gradio app and one for each component type (component as in package of html elements, javascript and css rules).

Gradio allows a developer to apply a stylesheet.

The webui submits a single one, but it builds this one as a single file, using other files.

First it grabs the one supplied with the webui, reads as file and keeps a copy in memory.
Then it checks the extensions folders, and if an extension has one, it appends it to the end of this sheet it's building in memory.
They are applied in alphanumerical order.
Then it grabs the user.css file in the root, and appends this one on last.

When the webui calls gradio to launch, it supplies this sheet new long sheet.

Many times, a lot of these extension writers don't understand this cascade, or how to increase specificity (being very specific to what things it affects). Specificity is another type of cascade. The specific rule is, if you are so specific where you say something like, I want this element, that lives inside of this, whose parent of that parent is that and the effects it may have are these, on these screen sizes; then css will say you are so specific, that it must be more important than the simple rule of make font this color.

Because specificity and cascades can be challenging for some to grasp, they try to use the "!important" command, which by definition is the highest specificity value that can exist, and the only thing that can override that is another "!important" command that follows in the order rule.

This causes others to not understand why the rules are not working as expected, because someone else used the css rules incorrectly, so then they do the same thing. There should never be a reason why an "!important" should be used, unless it's to override someone elses misuse of it. This scenario causes bugs and debugging issues in css.

So the most likely scenario, if your files are up to date, someone else's extension is overriding your defaults, they need to be specific enough that it targets just their elements, and this specificity has the benefit where they wont need to use "!important".

I would first make sure that your defaults stylesheet.css is up to date.
Try a hard reset, this will cause all files in the repo to grab anew, it wont redownload your checkdpoints, that's a separate task.

git reset --hard origin/master

After doing any update, it's advised to boot up, shut down, and boot up again, so it gives it a chance to download or install dependencies, some tools utilize an install.py, which only run on initial boot of the webui, and wont run on a apply and restart. With a project as large as deforum, there could be dependencies that will only install after other installs are met.

Check to see if your extensions are up to date. Go to your extension tab, click Check for updates, apply and restart.
You will have to do another boot cycle of the app as before.

Now, there's a chance that your browser cached files. So when you open in browser, you will want to do hard refresh of the page, a simple refresh is not enough, a hard refresh tells the browser that some files are now different, so get them instead of relying on copies you have (copies might have commands, stylesheets, etc, to files that don't exist or operate differently).

ctrl+f5

Now that you know that everything is all up to date and square, if you have the problem, it's time to seek it.
You will want to inspect the rules using the browser's devtools.
The simplest way is to use the 'select an element` feature of the devtools, hover over the element in question. It might try to select it's parents that wrap it, or children inside (if you intend to get parent).
So you will need to look at the tiered structure of the html, rules on the element, rules on the parents, or computed rules.

You will also want to use knowledge gained from this, and do a search all files from the tools of your choice (using an ide, grep, sed, whatever), to search for rules that affect your component.

You might get lucky and have only a few extensions that implement a stylesheet, and their sheets could be short in length. In that case, just open and read them, or change it's name to something like stylesheet.css.bak, (bak as in backup), so the webui does not pick it up, and re-enable them one at a time until you find the culprit, then file an issue with that extension creator and chew them out.