Define Max Page Width

Universal Dashboard Universal Dashboard Help
1

Is it possible to define a maximum width of the Dashboard?

I am trying to present a standard layout for all users, but some users have a ultra wide screen which stretches the content out.

2

Hey @GoGorilla just wondering if you have read:-
https://docs.universaldashboard.io/components/formatting#formatting-with-rows-and-columns

If you look at the help for new-udcolumn you will see:-
Creates a new column in the dashboard. This should be called within a New-UDRow’s content or endpoint block.

SYNTAX
    New-UDColumn [-AutoRefresh] [-Endpoint <Object>] [-Id <String>] [-LargeOffset <Int32>] [-LargeSize <Int32>] [-MediumOffset <Int32>] [-MediumSize <Int32>]
    [-RefreshInterval <Int32>] [-SmallOffset <Int32>] [-SmallSize <Int32>] [<CommonParameters>]

    New-UDColumn [[-Content] <ScriptBlock>] [-Id <String>] [-LargeOffset <Int32>] [-LargeSize <Int32>] [-MediumOffset <Int32>] [-MediumSize <Int32>] [-SmallOffset
    <Int32>] [-SmallSize <Int32>] [<CommonParameters>]

So you can specify -largesize -mediumsize and -smallsize so if you wanted something the full page width at any screen size then set all these to 12.
I hope this makes sense and answers your question?

3

Hey there,

Thanks for the reply, I have read that and understand the column sizing.

But what I am trying to do is restrict the size of the actual dashboard, not just the columns within it. much in the same as the way this forum is. Then the columns would be centered and the menu would not be in the top left corner of the browser.

4

you can define in your own $theme the alignment of text and set the CSS to center the text on formatting, so it’s not left-aligned. Or if you want something more in the middle create and empty column on the left hand side. Or use the -smalloffset or -mediumoffset or even -largeoffset to center your columns more.
Or not sure if you using enterprise or not, but you could use the page designer an online version is here:- https://uddesigner.azurewebsites.net/home

5

Try put this code in your UDTheme file

        'div#app.app' = @{
            BackgroundColor = '#333333'
            'align-items' = 'center'
        }
        UDDashboard = @{
            BackgroundColor = "#333333"
            FontColor = "#FFFFF"
            width =  '1080px'
        }
1 Like
6

Here’s a neat little hack I learned from Boostrap back in the day. Since Universal Dashboard is based on a 12 column layout, if you pad the content column with a “filler” column on each side, it will serve to center your content and give you more control over it’s size. Below is a decent example of how to accomplish this:

New-UDRow -Endpoint {
    New-UDColumn -LargeSize 3 -Content {}
    New-UDColumn -LargeSize 6 -Content {
        # Content Stuff Here...
    }
    New-UDColumn -LargeSize 3 -Content {}
}

Note that this doesn’t statically size the page to a number of pixels (which is generally bad practice), but rather reduces the amount room it has to expand the content, thus hopefully alleviating unwanted stretching.

Good luck!

7

Thanks a lot, the theme was the way to go on this!

1 Like