Align items in UDCard

PowerShell Universal
1

Product: PowerShell Universal Version: 4.3.0
Dear friends :slight_smile:
I have a simple card that is showing ad computers from different time span
Something like this:

$last7days = "23"
New-UDTypography -Text "Active PC last 7 days:  " 
New-UDChip -Label $last7days  -Size small -style @{"margin-left" = "142px" } 

$last30days = "123"
New-UDTypography -Text "Active PC last 30 days:  " 
New-UDChip -Label $last30days -Size small -style @{"margin-left" = "142px" }

And what I am trying to achieve is to align UDTypography to the left (which is by default) and UDChip to the right

How to do this in most flexible and simple way ?
Now im struggling with this margin-left values but any changes to the card or text breaks it apart :frowning:

2

You can use a flex container to do this. The New-UDRight function is from the tools module: PowerShell App Tools - PowerShell Module | PowerShell Universal

function New-UDRight {
    <#
    .SYNOPSIS
    Pull items to the right

    .DESCRIPTION
    Pull items to the right

    .PARAMETER Content
    The content to move to the right.
    #>
    [CmdletBinding()]
    param([ScriptBlock]$Content)

    New-UDElement -Tag 'div' -Content $Content -Attributes @{
        style = @{
            "display"         = "flex"
            "justify-content" = "flex-end"
            "margin-left"     = "auto"
            "margin-right"    = "0"
            "align-items"     = "flex-end"
        }
    }
}

New-UDApp -Content { 
    New-UDCard -Content {
        New-UDElement -Tag div -Content {
            New-UDTypography "Some Text" 
            New-UDRight -Content {
                New-UDChip -Label 100 -Size small 
            }
        } -Attributes @{
            style = @{
                display = 'flex'
            }
        }

    } 


}
3

thanks kind of worked (but have to changed a little bit)

New-UDElement -Tag div -Content {
                    New-UDTypography -Text "Computers with bitlocker ON:  "
                    New-UDElement -Tag div -Content {
                        
                    
                        New-UDChip -Label $bitlockeron -OnClick {
                            Set-UDClipboard -Data $bitlockeron
                            Show-UDToast "Copied to clipboard" -Position bottomRight
                        } -Size small
                    } -Attributes @{
                        style = @{
                            #"display"         = "flex"
                            "justify-content" = "flex-end"
                            "margin-left"     = "auto"
                            "margin-right"    = "0"
                            "align-items"     = "center"
                        }
                    }
                } -Attributes @{
                    style = @{
                        "display" = 'flex'
                        "align-items"     = "center"
                    }
                }

but the next problem is
im using pages not apps for this dash (app is main landing page and all other apps are pages in main app)
and as far as I know I am not allowed to use functions on the pages so I will have to use this code for every ud chip
and I have like 20 on this page - it will be a mess :frowning:
Any cleaner solution ?
and for future deployments - maybe a more systemic solution for such needs ? just like align command for every graphical component ?

4

You could define a custom module with a function for this. It will be available throughout all apps and pages.

5

also i can add this function to main landing app (which I did) and it works in child pages :slight_smile:
but anyway - maybe we can think of adding such behavior to the parameters of the graphical elements in future releases,