New-UDList Spacing

PowerShell Universal
1

PSU Version 4.0.11

Just following the New-UDList example here:

It shows in the demo image, a nicely spaced and formatted list:

I’ve copied and pasted the code as is, but my when I look at mine, it’s rendering without spaces between icons and labels so looks a bit squished together.

For example:
image

Is this a bug or is the demo using some custom css in the app, and if so, please can you point me in the direction if there’s an example of how to do this?

Thanks,
Tom

2

I found exactly the same issue with the Label and Icon spacing but wasn’t sure if it had anything to do with the MaterialDesign theme I`m using. Not had time to dig into it yet though…

I`d also be interested in the reason and a fix :slight_smile:

… Just tried changing the theme and now I`m confused as the spacing appears to be OK in the default theme :confused:

image

And huge in MaterialDesign

image

Cheers

3

Hmmm what version are you using? I’m using the out of the box theme on 4.0.11

4

I`m on version 4.0.12 which I installed yesterday over the top of 4.0.11 and to be honest, I can’t recall if I was still on 4.0.11 when I noticed the lack of spacing issue as you described it or when I set the theme to MaterialDesign.

Cheers

5

This is using the code you linked to with the default theme on 4.0.12

image

and this is with MaterialDesign

image

Cheers

6

Thanks, I think this is where I need to go then!
Was that using this: Universal.Icons.MaterialDesign - Ironman Software ?

Edit: Just attempted to install that module and use it.
I got the example to work New-UDMaterialDesignIcon -Icon "Md123" but I found the lack of documentation and parameters difficult to work with, I couldnt seem to change the size of the component even and -style @{width=100} just seemed to shift it 100 pixels to the right rather than make it 100px wide.

7

Not using that module specifically but have applied the MaterialDesign theme (which I believe is included in a standard install) to the entire app:

New-UDApp -Title “Test” -Theme (Get-UDTheme -Name ‘MaterialDesign’) -Pages $Pages

8

Awesome. Thanks for the details I’ll give that a go!

9

(I don`t know all the correct terms so if anyone wants to jump in and enlighten me, it would be appreciated ) …

The gap between the icon and text in MaterialDesign ListItems appears to be due to this element which has a min-width attribute of 56px

image
image

Altering it in the browser developer tools results in a far “nicer looking” space but I have no idea how to override the defaults in the PSU code.

This is with it set to 30px

image

And this is with it set to 25px

image

Cheers

10

OK, this looks better

image

$Theme = Get-UDTheme -Name 'MaterialDesign'
$Theme = @{
overrides = @{
MuiListItemIcon = @{
        root = @{
          minWidth = '25px'
}
    }
}
  }

Hopefully someone else will find this helpful :slight_smile:

2 Likes