Columns within UDRow being push to newline

PowerShell Universal
1

I’m trying to create, what I can only describe as a banner, within a dashboard. I want three different pieces of information to be displayed across the ‘banner’ (left, center, and right) on the same line. I’ve placed these items within UDRow/UDColumn but it’s pushing the center and right items to the next line.

Any idea what I’m doing wrong? I feel like the syntax makes sense…

      New-UDPaper -Id 'test' -Content {
          New-UDRow -Columns {
              New-UDColumn -SmallSize 4 -Content {
                  New-UDImage -Id 'logo1' -Path $service.LogoURL
              }
              New-UDColumn -SmallSize 4 -Content {
                  New-UDTypography -Id 'serviceName' -Text $service.ServiceName -Variant h3 -Align center
              }
              New-UDColumn -SmallSize 4 -Content {
                  New-UDChip -Label $service.Category
                  New-UDTypography -Id 'productCost' -Text $product.price -Variant h6 -Align right
              }
          }
      } -Style @{ "margin" = "0px" }

Here is what I get:

image
image1124×230 17.1 KB

Here is what I want:

image
image1124×228 16.8 KB

Product: PowerShell Universal
Version: 4.0.6
2

It might just be a screen size thing. Try playing with the other sizes. I also added some tweaks to the chip and price to get it stacked.

          New-UDPaper -Id 'test' -Content {
          New-UDRow -Columns {
              New-UDColumn -SmallSize 4 -ExtraLargeSize 4 -Content {
                  New-UDImage -Id 'logo1' -Url https://global.discourse-cdn.com/flex032/uploads/universaldashboard/original/2X/e/ea15af9d729b3c5e51837d571de9187da1769d3d.png
              }
              New-UDColumn -SmallSize 4 -ExtraLargeSize 4 -Content {
                  New-UDTypography -Id 'serviceName' -Text "KnowBe4" -Variant h3 -Align center
              }
              New-UDColumn -SmallSize 4 -ExtraLargeSize 4 -Content {
                  New-UDStack -Children {
                    New-UDChip -Label 'Security' -Style @{ maxWidth = "100px"; }
                    New-UDTypography -Id 'productCost' -Text 2 -Variant h6 -Align right
                  } -Direction column -AlignItems flex-end

              }
          }
      } -Style @{ "margin" = "0px" }

image
image1510×371 10.1 KB

3

Bingo! Not sure why the screen size was the culprit, but that worked.

Thanks so much @adam !

1 Like