Padding between Textboxes

1

I really like the look of disabled, outlined textboxed for simple data display, but I have yet to find a good way of adding a bit of space between components to stop them from overlapping.

image

 New-UDGrid -Item -ExtraSmallSize 6 -Content {
      New-UDCard -Title $($Eventdata.DisplayName) -Content {
          New-UDGrid -Container -Content {
                  New-UDTextbox -Label 'DisplayName' -Value "$($Eventdata.DisplayName)" -FullWidth -Variant outlined -Disabled
                  New-UDTextbox -Label 'UserPrincipalName' -Value "$($Eventdata.UserPrincipalName)" -FullWidth -Variant outlined -Disabled
          } 
      }
  }

I have played with adding padding with New-UDStyle, but doing that negates the 'Fullwidth" parameter

New-UDStyle -Style '
    padding: 8px;
    ' -Content {
        New-UDTextbox -Label 'UserPrincipalName' -Value "$($Eventdata.UserPrincipalName)" -FullWidth -Variant standard -Disabled
    }
2

You can use UDStack to fix this. It even allows you to specify spacing.

          New-UDStack -Direction column -Content {
                  New-UDTextbox -Label 'DisplayName' -Value "Cool" -FullWidth -Variant outlined -Disabled
                  New-UDTextbox -Label 'UserPrincipalName' -Value "Something" -FullWidth -Variant outlined -Disabled
          } -Spacing 4

image

3

Thanks, it seems to also be constraining the width of the boxes though.

image

New-UDGrid -Item -ExtraSmallSize 6 -Content {
    New-UDCard -Title $($Eventdata.DisplayName) -Content {
        New-UDGrid -Container -Content {
            New-UDStack -Direction column -Content {
                New-UDTextbox -Label 'DisplayName' -Value "$($Eventdata.DisplayName)" -FullWidth -Variant outlined -Disabled
                New-UDTextbox -Label 'UserPrincipalName' -Value "$($Eventdata.UserPrincipalName)" -FullWidth -Variant outlined
                New-UDTextbox -Label 'Hidden' -Value "$($Eventdata.HiddenFromAddressListsEnabled)" -FullWidth -Variant outlined -Disabled
                New-UDTextbox -Label 'WhoCanBook' -Value "$($Eventdata.WhoCanBook)" -FullWidth -Variant outlined -Disabled


            } -Spacing 2
            
        } 
    }
}
1 Like
4

Removing the UDGrid inside the card solved the width issue

New-UDGrid -Item -ExtraSmallSize 6 -Content {
    New-UDCard -Title $($Eventdata.DisplayName) -Content {
          New-UDStack -Direction column -Content {
              New-UDTextbox -Label 'DisplayName' -Value "$($Eventdata.DisplayName)" -FullWidth -Variant outlined -Disabled
              New-UDTextbox -Label 'UserPrincipalName' -Value "$($Eventdata.UserPrincipalName)" -FullWidth -Variant outlined
              New-UDTextbox -Label 'Hidden' -Value "$($Eventdata.HiddenFromAddressListsEnabled)" -FullWidth -Variant outlined -Disabled
              New-UDTextbox -Label 'WhoCanBook' -Value "$($Eventdata.WhoCanBook)" -FullWidth -Variant outlined -Disabled

          } -Spacing 2
      } 
}