Problem with vertical content stacking within paper elements

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'
                        }

Paper2

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