Devolutions ForumDevolutions Forum

Columns within UDRow being push to newline

Columns within UDRow being push to newline

avatar

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:


95ca2f42bdf74c6e7dcbb5b48caa8beeca55cfa7
Here is what I want:


e3918e802d4328e7c2517eb16179aa6e4c9f224b

Product: PowerShell Universal
Version: 4.0.6


e3918e802d4328e7c2517eb16179aa6e4c9f224b.png

95ca2f42bdf74c6e7dcbb5b48caa8beeca55cfa7.png

avatar
Adam Driscoll

Recommended Answer

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://canada1.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" }




bc27db4a052fefd7434057e81f33b2a3dd61e34a

Adam Driscoll
PowerShell Expert and Developer at Devolutions

bc27db4a052fefd7434057e81f33b2a3dd61e34a.png

All Comments (2)

avatar
Adam Driscoll

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://canada1.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" }




bc27db4a052fefd7434057e81f33b2a3dd61e34a

Adam Driscoll
PowerShell Expert and Developer at Devolutions

bc27db4a052fefd7434057e81f33b2a3dd61e34a.png

avatar

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

Thanks so much @Adam Driscoll !

1