Hello, I’m running into an issue with using papers in a grid. I want the items to stack vertically instead of horizontally. How would I go about doing that. Here is a snippet of the code and a visual of what I’m talking about. Hopefully this an easy fix, but I can’t seem to figure it out.
New-UDGrid -Container -Content {
New-UDGrid -Item -MediumSize 4 -Content {
New-UDPaper -Content {
New-UDTypography -Variant h4 -Text "Asset Info" -Align center -NoWrap
New-UDList -Content {
New-UDListItem -Label 'Asset Tag' -Icon (New-UDIcon -Icon tag -Size 3x) -SubTitle $Asset.AssetTag
New-UDListItem -Label 'Asset Type' -Icon (New-UDIcon -Icon $AssetTypeIcon -Size 3x) -SubTitle $Asset.AssetType
New-UDListItem -Label 'Connection' -Icon (New-UDIcon -Icon $AssetConnectionTypeIcon -Size 3x) -SubTitle $Asset.ConnectionType
New-UDListItem -Label 'Mac Address' -Icon (New-UDIcon -Icon cog -Size 3x) -SubTitle $Asset.MACAddress.MacAddressColons
New-UDListItem -Label 'IP Address' -Icon (New-UDIcon -Icon globe -Size 3x -Color $OnlineColor ) -SubTitle $Asset.IP -OnClick {
Show-UDToast -Message 'Clicked'
}
}
} -Style @{
backgroundColor = 'LightGrey'
textAlign = 'center'
}
Product: PowerShell Universal
Version: 1.4.6
If they are going horizontally and not vertically as it looks in the screenshot why don’t you just do something like New-UDHTML -markup '<p></p>'
then this will force a new line, so add this in-between the list items
Thank you for the reply. I did try something like that earlier with page breaks. Unfortuantely this had the same result as the page break. I added a button in there as well to demonstrate a little more clearly as well. The idea being the New-UDTypography being the header/title of that section that’s centered.
New-UDGrid -Container -Content {
New-UDGrid -Item -MediumSize 4 -Content {
New-UDPaper -Content {
New-UDHTML -markup '<p></p>'
New-UDHtml -Markup '<button class="btn ud-button" type="button" style="float: right;" onClick="window.location.reload();">Search Again</button>'
New-UDHTML -markup '<p></p>'
New-UDTypography -Variant h4 -Text "Asset Info" -Align center -NoWrap -Paragraph
New-UDHTML -markup '<p></p>'
New-UDList -Content {
New-UDListItem -Label 'Asset Tag' -Icon (New-UDIcon -Icon tag -Size 3x) -SubTitle $Asset.AssetTag
New-UDListItem -Label 'Asset Type' -Icon (New-UDIcon -Icon $AssetTypeIcon -Size 3x) -SubTitle $Asset.AssetType
New-UDListItem -Label 'Connection' -Icon (New-UDIcon -Icon $AssetConnectionTypeIcon -Size 3x) -SubTitle $Asset.ConnectionType
New-UDListItem -Label 'Mac Address' -Icon (New-UDIcon -Icon cog -Size 3x) -SubTitle $Asset.MACAddress.MacAddressColons
New-UDListItem -Label 'IP Address' -Icon (New-UDIcon -Icon globe -Size 3x -Color $OnlineColor ) -SubTitle $Asset.IP -OnClick {
Show-UDToast -Message 'Clicked'
}
}
} -Style @{
backgroundColor = 'LightGrey'
textAlign = 'center'
}
Sorry I get you now…well to do this the whole page width the grid column would need to be 12 in size. But if you don’t want that effect but to keep the size 4, then use the new-udrow
more explained here:- Grid - PowerShell Universal
I hope this helps?
Thank you! That did the trick. I’m sure there is a much better way to do what I wanted to accomplish but this works!
New-UDGrid -Container -Content {
New-UDGrid -Item -MediumSize 4 -Content {
New-UDPaper -Content {
New-UDRow -Columns {
New-UDColumn -SmallSize 12 -Content {
New-UDTypography -Variant h4 -Text "Asset Info" -Align center -NoWrap -Paragraph
}
New-UDColumn -SmallSize 12 -Content {
New-UDList -Content {
New-UDListItem -Label 'Asset Tag' -Icon (New-UDIcon -Icon tag -Size 3x) -SubTitle $Asset.AssetTag
New-UDListItem -Label 'Asset Type' -Icon (New-UDIcon -Icon $AssetTypeIcon -Size 3x) -SubTitle $Asset.AssetType
New-UDListItem -Label 'Connection' -Icon (New-UDIcon -Icon $AssetConnectionTypeIcon -Size 3x) -SubTitle $Asset.ConnectionType
New-UDListItem -Label 'Mac Address' -Icon (New-UDIcon -Icon cog -Size 3x) -SubTitle $Asset.MACAddress.MacAddressColons
New-UDListItem -Label 'IP Address' -Icon (New-UDIcon -Icon globe -Size 3x -Color $OnlineColor ) -SubTitle $Asset.IP -OnClick {
Show-UDToast -Message 'Clicked'
}
}
}
}
} -Style @{
backgroundColor = 'LightGrey'
textAlign = 'center'
}
}
1 Like