Help with chaning the submit button on New-udform

PowerShell Universal
1

Hi ,
I have a long form using New-UDForm. everything is working fine. the one thing I cant seem to figure out is how to change the Submit button size and location as its way too small and located on the bottom left corner by default.

Thanks

2

You could likely use UDStyle to adjust it with some custom CSS but there isn’t a simple way to make this happen at the moment. I’ve add an issue to our backlog to make this customizable.

2 Likes
3

Thanks @adam

4

Has anyone successfully use UDstyle to update the UDform submit button? I am a failure when it comes to CSS.

I received a lot of complaints from the end user saying the button in visible enough…

5

Here is a very hory way of doing … something :rofl:

New-UDStyle -Style '
	div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-6 > button > span.MuiButton-label
	{		
		background-color: red;
		color: white;
		font-size: 5em;
		font-weight: 900;
		padding-left: 10px;
		padding-right: 10px;
		min-width: 500px;
	}
	div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-6 > button > span.MuiButton-label:hover 
	{		
		background-color: yellow;
	}
' -Content {
	New-UDForm -Content {
		New-UDTextbox -Id 'txtTextfield'
		New-UDCheckbox -Id 'chkCheckbox'
	} -OnSubmit {
		Show-UDToast -Message $EventData.txtTextfield
		Show-UDToast -Message $EventData.chkCheckbox
	}
}

Please note this will affect any other buttons with labels that have the same css class selector (i.e. div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-6 > button > span.MuiButton-label) - but I think if you’re only using one form on your page and you don’t have any other buttons that are also within an xs-6 div grid you should be ok.

Imgur

6

Just sharing my workaround for this as well, wanted to keep it as simple as possible.

New-UDStyle -Content {...} -Style 'button.MuiButtonBase-root.MuiButton-root.MuiButton-text:enabled{background-color: #E0E0E0;color: black;}'

Just the Style, more readable.

button.MuiButtonBase-root.MuiButton-root.MuiButton-text:enabled
        {
            background-color: #E0E0E0;
            color: black;
        }

image
image710Ă—228 11.7 KB

image

Kept it default for the disabled look but using :enabled at the end, it only changes when the button is clickable if you have validations.

Edit: Dropped the .jssxx from the first line.

7

Well scratch that, just realized that at the end jssXX changes numbers… so doesn’t work on other stuff. but getting close i guess.

8

I was looking to see if an issue was raised on this and don’t see one. I see buttonvariant, but not something like color (that I use a lot of in UDButton). Any thoughts on this?