[Enhancement] Add -TextAlignment to New-UDButton

[eizedev]

Hi,

it would be nice if you could add a new switch f.e. '-TextAlignment' to 'New-UDButton'. (Similar to -IconAlignment) If you use f.e. New-UDButton inside an UDGrid as flat button, the text is always centered (see screenshot). As addition it would also be nice if i could choose if the text should be always upper or lower case. Perhaps use "as it is" by default?. This would cause the display of the button to line up properly in the grid. In my example, the name of the Active Directory user is in proper case (Administrator).

New-UDButton -Flat -Text $_.Name -OnClick { }

Complete Code for this screenshot:

$AllUsersArray = @($($AllUserObjects)).foreach( {
    [PSCustomObject]@{
      Username = $($_.SamAccountName)
      Name     = $(New-UDButton -Flat -Text $_.Name -OnClick { 
          Show-UDModal -Header {
            New-UDHeading -Size 5 -Text "Description for User '$($_.SamAccountName)'" 
          } -Content {
            New-UDRow -Columns 
            { New-UDColumn -Size 8 -Content 
              {
                if ($_.Description) 
                {
                  $_.Description 
                }
                else 
                {
                  "No Description" 
                } 
              }
              New-UDColumn -Size 8 -Content {
                New-UDButton -BackgroundColor $Cache:LoginBGColor -Text "Close" -OnClick { Hide-UDModal } 
              } 
            } 
          } 
        }
      )
    } | Out-UDGridData
  }
)

Thanks

[eizedev]

I just realized my issue is still open. If someone else has the same problem, you can work around it until UD 3.0 comes with the new theming option. You can just add the -Style parameter with a hashtable configuration for the text-transform. You can use none/unset, uppercase, lowercase and capitalize as possible values. In my case i am using capitalize so the text is in proper case ("As it is" (First letter uppercase)).

Directly with -Style in New-UDButton cmdlet:

New-UDButton -Flat -Text $_.Name -Style @{'text-transform' = 'capitalize' }

OR

$Cache:ButtonTextStyle = @{'text-transform' = 'capitalize' }
New-UDButton -Flat -Text $_.Name -Style $Cache:ButtonTextStyle

Or by using the New-UDStyle cmdlet

New-UDStyle -Style '.btn { text-transform : capitalize;}' -Content { New-UDButton -Flat -Text $_.Name }

(Of course you can use the global theme configuration of the dashboard for all buttons)

Edit: For displaying the button text not in the middle/center the mentioned TextAlignment is not the css property text-align, you need to set the display property from middle (default) to contents to get the "normal" left text align (for my use case - displaying a nicely integrated button as text into a grid).

Example:

New-UDButton -Flat -Style @{'text-transform' = 'capitalize'; 'display' = 'contents' }

Result:

(See also https://forums.universaldashboard.io/t/udbutton-text-uppercase/2531/7)