How do I nicely format a modal with headers and spacing?

I recently bought a license for UD Dashboard and love it and would appreciate some help.
I currently have a modal popup for creating a new user that looks like this:

I’d like it to be wider and break up the inputs into sections, like this:

  1. Make it wider
  2. Break into sections with headers
  3. Have some items be on the same line, others not

I’ve tried a few things, including using new-udhtml with custom CSS (which is new to me). I’d welcome pointers on doing this.


Hey @Hugepickle there are number of ways to do this but the simplest way to get as close to what you want would be something like this

It doesn’t have the line separation your are looking for but might give you a starting point / some ideas:

$Dashboard = New-UDDashboard -Title "Hello, World!" -Content {
                New-UDCard -Title "User Information" -Content {
                    New-UDParagraph -Text "Create User"
                    New-UDTextbox -Id "txtFname" -Label "First Name" -Type text
                    New-UDTextbox -Id "txtLname" -Label "Last Name" -Type text 
                    New-UDTextbox -Id "txtDisplay" -Label "Display Name" -Type text
                    New-UDTextbox -Id "txtTitle" -Label "Job Title" -Type text
                    New-UDParagraph -Text "Logon Information"
                    New-UDTextbox -Id "txtUserName" -Label "User Name" -Type text
                    New-UDTextbox -Id "txtUserName" -Label "Password" -Type password 
                    New-UDParagraph -Text "License Information"
                    New-UDTextbox -Id "NewScriptModalTextBoxName" -Label "Office 365 License" -Type text

                New-UDElement -Tag div -Attributes @{
                    style = @{
                        textAlign = "right"
                } -Content {
                    New-UDButton -Text "Next" -Icon folder_plus -OnClick {
                        # Get Input Data
                        $FirstName = ((Get-UDElement -Id 'txtFName').Attributes["value"])
                        $LastName = ((Get-UDElement -Id 'txtLName').Attributes["value"])

                        # do something

Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Dashboard $Dashboard -Port 10001

Cool, thanks. I appreciate the start and will play around with this. Do you also know what the cmdlet is to include a drop-down?

Hey @Hugepickle I posted the other-day about spacing between input fields here:-

As for including a drop-down, just bookmark this site and you will see nice examples for everything like:-
If you want to be able to have multiple selections then check out this component I released here:-
Ironman Software Marketplace - UniversalDashboard.UDSelector
I hope this helps you in your journey with UD. Peace

Looks great, thanks! @psdevuk and @leeberg, appreciate the speedy response, very cool to have a platform backed by folks to help new folks like me understand it. .

1 Like