[Resolved] Few issues with large lists

PowerShell Universal
1

Hi guys

Few issues with below example:

  • New-UDTypography text seem to ignore night mode
  • If the list contains too many items it will break past hard set background into infinity and beyond
  • Is there a way to set maximum vertical boundary for containers so that it uses scroll bar instead?
  • Is there a better way to do listview with checkboxes perhaps?

Thanks

New-UDGrid -Container -Content {
        New-UDGrid -Item -LargeSize 2 -SmallSize 1 -Content {}
        New-UDGrid -Item -LargeSize 4 -MediumSize 5 -SmallSize 12 -ExtraSmallSize 12 -Content {
            New-UDTypography -Text "Stuff Enabled" -Variant h6 -Style @{"font-weight" = "bold"}
            New-UDPaper -Elevation 2 -Children {
                New-UDGrid -Container -Content {
                    for ($i = 0; $i -lt (Get-Random -Minimum 30 -Maximum 200); $i++) {
                        New-UDGrid -Item -ExtraSmallSize 12 -Children {
                            New-UDCheckBox -Label $i -LabelPlacement end
                        }
                    }
                }
            }
            New-UDButton -Text "Disable that stuff!" -Variant outlined -OnClick {}
        }
        New-UDGrid -Item -LargeSize 4 -MediumSize 5 -SmallSize 12 -ExtraSmallSize 12 -Content {
            New-UDTypography -Text "Stuff Disabled" -Variant h6 -Style @{"font-weight" = "bold"}
            New-UDPaper -Elevation 2 -Children {
                New-UDGrid -Container -Content {
                    for ($i = 0; $i -lt (Get-Random -Minimum 30 -Maximum 200); $i++) {
                        New-UDGrid -Item -ExtraSmallSize 12 -Children {
                            New-UDCheckBox -Label $i -LabelPlacement end
                        }
                    }
                }
            }
            New-UDButton -Text "Enable that stuff!" -Variant outlined -OnClick {}
        }
        New-UDGrid -Item -LargeSize 2 -SmallSize 1 -Content {}
    } -Spacing 3
2

UniversalDashboard.Styles and an overflow CSS to the rescue :slight_smile:
This module gives me a ton of new ideas, thanks for putting it out there @adam, previously in UDv2 I was adding CSS to global theme, but now with New-UDStyle cmdlet I get so much more granual control over CSS it’s crazy!

Here’s the end result:

$Style = "
    height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;"
    New-UDGrid -Container -Content {
        New-UDGrid -Item -LargeSize 2 -SmallSize 1 -Content {}
        New-UDGrid -Item -LargeSize 4 -MediumSize 5 -SmallSize 12 -ExtraSmallSize 12 -Content {
            New-UDTypography -Text "Stuff Enabled" -Variant h6 -Style @{"font-weight" = "bold"}
                New-UDPaper -Elevation 2 -Children {
                    New-UDStyle -Style $Style -Content {
                        New-UDGrid -Container -Content {
                            for ($i = 0; $i -lt (Get-Random -Minimum 30 -Maximum 200); $i++) {
                                New-UDGrid -Item -ExtraSmallSize 12 -Children {
                                    New-UDCheckBox -Label $i -LabelPlacement end
                                }
                            }
                        }
                    }
                }
            New-UDButton -Text "Disable that stuff!" -Variant outlined -OnClick {}
        }
        New-UDGrid -Item -LargeSize 4 -MediumSize 5 -SmallSize 12 -ExtraSmallSize 12 -Content {
            New-UDTypography -Text "Stuff Disabled" -Variant h6 -Style @{"font-weight" = "bold"}
            New-UDPaper -Elevation 2 -Children {
                New-UDStyle -Style $Style -Content {
                    New-UDGrid -Container -Content {
                        for ($i = 0; $i -lt (Get-Random -Minimum 30 -Maximum 200); $i++) {
                            New-UDGrid -Item -ExtraSmallSize 12 -Children {
                                New-UDCheckBox -Label $i -LabelPlacement end
                            }
                        }
                    }
                }
            }
            New-UDButton -Text "Enable that stuff!" -Variant outlined -OnClick {}
        }
        New-UDGrid -Item -LargeSize 2 -SmallSize 1 -Content {}
    } -Spacing 3
}

P.S. installing modules from PSU 1.3.2 gives me HTTP error 400, so I had to install it manually.