Sticky AppBar possible?

PowerShell Universal
1 
Product: PowerShell Universal
Version: 2.3.0

Dear @adam , Dear All
This might be a very stupid question and maybe it has been answered a hundred of times… but I wasn’t able to find a real answer in the forum nor in the docs.

Basically I would like to have the top AppBar as “sticky” or “permanent” (call it however you want. :wink: ). So when you scroll through your dashboard content, the AppBar should stay always on top.

Is that possible? If yes, how?
Because I haven’t found a way to define this using the New-UDDashboard commandlet…
What we currently do is this:

New-UDDashboard -Title “MyDashBoard” -Pages $Pages -Theme $Theme -DefaultTheme dark

But there is no possibility to say for example “-AppBar sticky” or something like that.

Does anybody know how to achieve this?

Thanks a lot for your much appreciated help.

Best regards,
Don

2

You can use the New-UDAppBar cmdlet with the -position fixed parameter. The div is just to demonstrate the fixed nature by putting something really high in the body.

New-UDAppBar -Position fixed -Children { New-UDElement -Tag 'div' -Content { "Title" } }

New-UDElement -Tag 'div' -Content {

} -Attributes @{
    style = @{
        height = "10000px"
    }
}

Added it to the docs too: AppBar - PowerShell Universal

3

Hi @adam

Thanks a lot for your quick reply!

Indeed, I tried to use UDAppBar in my main UD-Dashboard file which will start the Dashboard itself… However I’m still encountering some issues:

  • First it seems that you cannot use AppBar in combination with New-UDDashboard -Pages but only with -Content
  • Second if I use AppBar to override the default AppBar which gets created via New-UDDashboard also this happens:
    – The Theme Switch goes to the very left of the AppBar, next to the AppBar Title
    – The Avatar and Username incl. the Logoff buttons disappear.

Again, sorry to bother again with this… maybe it’s even possible… But I wasn’t able to find information in the docs and in the Cmdlet Help Page (and forum obviously :slight_smile: )

Thanks again for your much appreciated help!

Best,
Don

4

Hi Don

I can give you a workaround for getting the theme switch back to the right side, for the time being:

New-UDAppbar -Position fixed -Children {
        New-UDTypography -Text "$title" -Variant "h6"
        New-UDDynamic -Content {
            New-UDTypography -Text "" -Style @{
                'margin-left' = 'auto'
            }
            New-UDImage -Url "/Assets/example.png" -Width '50' -Height '61'
        }
    } -Drawer $Drawer

The relevant part is this:

New-UDTypography -Text "" -Style @{
    'margin-left' = 'auto'
}

This pushes the theme switch back to the right side.

Greets,
Michael

5

Hey Michael

Thank you for your much appreciated help! :smiley:

However I think this won’t be the final solution to the problem. I realized that the AppBar somehow overrides the “main” AppBar which gets created by New-UDDashboard. So in theory it should be possible to specify the “-Position fixed” parameter directly as one of New-UDDashboard arguments. I don’t think it will be possible to cleanly workaround this issue by just using New-UDAppBar.
To be honest I don’t really see the usecase for this command since on every page an AppBar is automatically created… and you can’t even override it’s layout but just create a new one.

Again, maybe I’m totally wrong… But hopefully @adam or somebody else who has deep knowledge on this component will put some light on it.

Thanks again,
Don

6

No, you’re right and I think we can add a sticky option to the automatic app bar. I’ll open an issue for it.

7

OK thanks a lot Adam! Really much appreciated that you’ll take care also of this “issue”.
Looking forward to it!
I’ll add a reference to this thread in your issue tracker…

Kind regards,
Don

1 Like