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.

Thanks

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

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.

Imgur