New-UDCard Styles

PowerShell Universal
1 
Product: PowerShell Universal
Version: 2.5.4
UniversalDashboard Module: 3.8.0
UniversalDashboard.Style Module: 1.0.0

Hi @adam, related to your solution to change the background color of a UDCard (New-UDTable Formatting - #4 by adam), I’m now trying to apply some additional styles to my UDCard.

Where can I look to find additional properties and examples of syntax such as the UDCard’s size, text horizontal alignment, vertical alignment, font-size etc. Looking for a method to list “here are all of the properties available and here is the exact syntax of how you write the code”.

Here is what I have currently and trying to add text alignment and font-size in the .MuiCard-root object:

New-UDStyle -Style "
   .MuiCard-root {
   background-color: "green"
  # CardSize
  # text-alignment
  # font-size
}" -Content {
   New-UDCard
}
2

Typically with using New-UDStyle I’ve just hit the developer view in chrome (f12) and then browsed through the components and elements, checking the styles pane on the right hand side, or right click on the page component and hit inspect, you can often glean what css to modify that way.
As for card size, it fills it’s container, so I’ve usually just used new-udgrid or new-udrow / new-udcolumn for that but if you want to adjust it directly you can do it this way - you’ll just loose out on the dynamic resizing if you do:

new-udcard -Style @{width = 200; height = 80;"background-color"= "green"} -Content {
    New-UDElement -Tag div -Attributes @{style=@{width = "100%";"text-align"="center"}} -Content {
        New-UDTypography -text "test" -Variant h5
    }
}

I tried also adding ‘“text-align”= “center”’ but that didnt wanna work. So I’ve provided an option above with a workaround i’ve used in the past, basically you wrap your content with a div and centrally align that - its great for aligning in modals

With new-udstyle, I bet you were given that as a workaround prior to the -style parameter being added on new-udcard, but that seems a cleaner way now. You’re also modifying it for that individual component, you could look at using the dashboard theme options if you want to modify all components too.

As for font size, I’d typically use new-udtypography and set it on that, keeping everything defined in your dashboard theme and consistent throughout.

3

Thanks for the thorough reply @insomniacc! That certainly helps me know where to look.

The last piece I have for this particular inquiry is how can I vertically align text on the UDCard? I’m using the same format as you have and have added “verticle-align”=“middle” right after the center alignment, but it does not seem to submit to my request. Any ideas?

4

Vertically aligning text in HTML\CSS is hilariously difficult.

I think the main thing is to ensure that the card has a static height or uses flex box.

5

I’ll also add, in my horizontal alignment example using a div, you’ll notice I’m setting the width to 100%, if you want to use the same method for vertical you’ll likley have to also set the height of the div to 100% too so it spans the full height of your card. Otherwise by default it will only render the height it requires for the content you put in it.

6

Strangely enough, I added the code to set the height to 100% for the vertical align, but still no luck. I’m going to continue to experiment. Thanks guys!

7

Sorry to dig up this antique post, but I have a similar issue styling cards and figure it might be helpful for someone else to have more info in one place. I’m moving a simple dashboard from v2.12.2 to v4.2.21 and having issues simply changing the background color. Here’s the code from my previous dashboard, which is just set to change the background color of a card based on a time offset.

I have three style hashtables defined at the top of the page, but they don’t seem to be respected when I actually build the card. Relevant snippets:

$redStyle = @{ 'background-color' = '#B81D13' }
$yellowStyle = @{ 'background-color' = '#EFB700' }
$greenStyle = @{ 'background-color' = '#008450' }

New-UDCard -Body $walkthroughCardBody -Footer $walkthroughCardFooter -Style $(
   #Calculate time intervals and update background accordingly
   if ( $walkthroughDifference.totalhours -lt 16 ) { $greenStyle }
   elseif ( $walkthroughDifference.totalhours -lt 24 ) { $yellowStyle}
   else { $redStyle }
)