Keep buttons on same line when using New-UDStyle or Css

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 2.10.2

Hey PSU folks,

I’m building a dashboard page, which has 4 buttons below a table.

When I simply create the buttons, like below, they all show up on 1 line; just like I want. This is without creating any grids, rows/columns, etc. and they collapse properly when the screen size changes. Perfect!

    $button_ApproveMembers = New-UDButton -Text "Approve Members" -Color Primary -OnClick {
        }# $button_ApproveMembers

    $button_ChangeMembers = New-UDButton -Text "Change Members" -Color Secondary -OnClick {
        }# $button_ChangeMembers

    $button_ChangeOwner = New-UDButton -Text "Change Owner" -Style @{"background-color" = "#D8E026"} -OnClick {
        }# $button_ChangeOwner

     $button_DeleteGroup =  New-UDButton -Text "Delete Group" -Style @{"background-color" = "#D13576"} -OnClick {
        }# $button_DeleteGroup

    $button_ApproveMembers
    $button_ChangeMembers
    $button_ChangeOwner
    $button_DeleteGroup

Notice the last 2 use -Style vs. -Color, because I need more than just Primary and Secondary. Like this:

    $button_ChangeOwner = New-UDButton -Text "Change Owner" -Style @{"background-color" = "#D8E026"} -OnClick {
    }# $button_ChangeOwner

Unfortunately when providing a color other than Primary or Secondary, they do not appear darker when hovering; like they do when using Primary or Secondary. This had led me to wrapping the button in a New-UDStyle, and I’ve also tried styling with Css. In both cases I can assign the proper background color and we get the proper darker shade of the color when hovering.

The problem is that when using New-UDStyle, or using Css, for the buttons; they are now put on a new line. I do not want them on a new line, and need them to stay on the same line. I’ve tried using display: inline !important in the -Style and Css, but no workie (I may be doing that wrong).

The below screenshot shows me using either New-UDStyle or CSS with $button_DeleteGroup, and it now appears on a new line :frowning:

2022-05-25_10-08-39
2022-05-25_10-08-39851×207 18.8 KB

How can I keep the buttons on the same line, when using either New-UDStyle or Css?

Thanks,
Rob

2

In your style element try using:

display:inline-block;

instead of inline :slight_smile:

1 Like
3

Ha! Figured it out. As usual it was something small. When using Css, I had to specify my New-UDElement tag as ‘span’, instead of ‘div’. Makes perfect sense :wink:

My Css for this:

.div-hover-btn-LimeGreen .MuiButton-root {
    background: #D8E026 !important;
}

.div-hover-btn-LimeGreen:hover .MuiButton-root {
    text-decoration: none; background-color: #c0c721 !important;
}

.div-hover-btn-HotPink .MuiButton-root {
    background: #D13576 !important;
}

.div-hover-btn-HotPink:hover .MuiButton-root {
    text-decoration: none; background-color: #B92F68 !important;
}

My buttons:

$button_ApproveMembers = New-UDButton -Text "Approve Members" -Color Primary -OnClick {
    }# $button_ApproveMembers

$button_ChangeMembers = New-UDButton -Text "Change Members" -Color Secondary -OnClick {
    }# $button_ChangeMembers

$button_ChangeOwner = New-UDElement -Tag 'span' -Attributes @{className = 'div-hover-btn-LimeGreen'} -Content {
        New-UDButton -Text "Change Owner" -Style @{"background-color" = "#D8E026"} -OnClick {
        }# $button_ChangeOwner
    }# New-UDElement

$button_DeleteGroup = New-UDElement -Tag 'span' -Attributes @{className = 'div-hover-btn-HotPink'} -Content {
        New-UDButton -Text "Delete Group" -OnClick {  
        }# $button_DeleteGroup
    }# New-UDElement

Yay!
2022-05-25_10-47-28

4

Thanks Tom, I’ll keep that in mind for the future.