Alignment UDGrid

hello all,

I have a problem regarding alignment in UDGrid. How do I get it to work as shown in the picture? I have tried several things, but it has not worked so far. I am currently not so good in CSS / PowershellUniversal. Thanks for your help

Product: PowerShell Universal
Version: 2.11.0
UniversalDashboard 3.6

You can do something like this:

    New-UDRow -Columns {
        New-UDColumn -LargeSize 6 -Content {
            New-UDCard -Text "6" -Style @{
                backgroundColor = 'blue'
                color = "white"
            }
        }
        New-UDColumn -LargeSize 6 -Content {
            New-UDCard -Text "6" -Style @{
                backgroundColor = 'blue'
                color = "white"
            }
        }
    }
    New-UDRow -Columns {
        New-UDColumn -LargeSize 12 -Content {
            New-UDCard -Text "12" -Style @{
                backgroundColor = 'blue'
                color = "white"
            }
        }
    }

hi adam,
thank’s for yor answer, I have formulated the question badly. It is about the alignment of the text or button. How can I align the text or buttons in a card or UDGrid? So that buttons or text in the right card align ‘right’.
I tried it with “text-align” but it doesn’t work.

thanks adam

You can use New-UDTypography to align text and you can use New-UDElement to align everything else.

    New-UDRow -Columns {
        New-UDColumn -LargeSize 6 -Content {
            New-UDCard -Style @{
                backgroundColor = 'blue'
                color = "white"
            } -Content {
                New-UDTypography -Align left "6"
            }
        }
        New-UDColumn -LargeSize 6 -Content {
            New-UDCard -Style @{
                backgroundColor = 'blue'
                color = "white"
            } -Content {
                New-UDTypography -Align right "6"
            }
        }
    }
    New-UDRow -Columns {
        New-UDColumn -LargeSize 12 -Content {
            New-UDCard -Style @{
                backgroundColor = 'blue'
                color = "white"
            }  -Content {
                New-UDElement -Tag 'div' -Content {
                    New-UDButton -Text "12"
                } -Attributes @{
                    style = @{
                        textAlign = "center"
                    }
                }
            }
        }
    }

3 Likes

thanks for your answer. I copied your code exactly, but the alignment still doesn’t work for me. That’s weird

ok sorry, I have tested it with a brand new dashboard, there it works without problems. That means somewhere in my dashboard I have an error in it. Thank you Adam!