Help with chaning the submit button on New-udform

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.


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.


Thanks @adam

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…

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.


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.

            background-color: #E0E0E0;
            color: black;


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.

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

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?