Center Content on the Page

You can center content on the page by using a column offset.

$Dashboard = New-UDDashboard -Title "Logo" -Content {
    New-UDRow -Columns {
        New-UDColumn -SmallOffset 4 -SmallSize 4 -Content {
            New-UDCard -Title "Centered" -Content {}
        }
    }
} 

2 Likes

Hi @adam
Would you have an example code for V3 dashboard, please?
The above example doesn’t work exactly same way in V3 anymore, but I was able to get some wonky result as a temporary workaround using below:

New-UDRow -Columns {

        New-UDColumn -LargeSize 4 -Content {}

        New-UDColumn -LargeSize 4 -LargeOffset 4 -Content {

            New-UDTextbox -Id "mBoxSearchString" -Label "" -Placeholder "Type in keywords to find mailboxes"

            New-UDButton -Text "Search" -Variant outlined -OnClick {

                Sync-UDElement -Id "sync-exchResults"

            }

        }

    }

Thanks

The Material UI framework doesn’t have offset properties so what you’re doing with the empty column is probably the way to go. It should achieve the same effect.

What’s wonky about the result?

It’s not perfectly centered. I guess I’ll just wrap it in an HTML element and center it with CSS instead.

It was a bit off visually, but I was able to center it with below :slight_smile:

New-UDRow -Columns {

        New-UDColumn -LargeSize 5 -MediumSize 5 -SmallSize 5 -Content {}

        New-UDColumn -LargeSize 5 -MediumSize 5 -SmallSize 5 -Content {

            New-UDTextbox -Id "mBoxSearchString" -Label "" -Placeholder "Type in keywords to find mailboxes"

            New-UDButton -Text "Search" -Variant outlined -OnClick {

                Sync-UDElement -Id "sync-exchResults"

            }

        }

    }

Haven’t tried this, but would setting 3 columns work? With the content in the middle column…

New-UDRow -Columns {

    New-UDColumn -LargeSize 3 -MediumSize 3 -SmallSize 3 -Content {}

    New-UDColumn -LargeSize 3 -MediumSize 3 -SmallSize 3 -Content {
        New-UDTextbox -Id "mBoxSearchString" -Label "" -Placeholder "Type in keywords to find mailboxes"
        New-UDButton -Text "Search" -Variant outlined -OnClick {
            Sync-UDElement -Id "sync-exchResults"
        }
    }

    New-UDColumn -LargeSize 3 -MediumSize 3 -SmallSize 3 -Content {}

}