Product: PowerShell Universal
Version: 3.9.13
How can I get rid of the space left at the top of this grid (pictured)?
New-UDElement -Tag 'div' -Id 'mainContainer' -Content {
New-UDGrid -Container -Content {
New-UDGrid -Item -ExtraSmallSize 12 -Content {
New-UDPaper -Content {
New-UDCard -TitleAlignment 'center' -Content {
I cant replicate this, and wonder if it’s something in your css or theme causing it.
Here’s my test:
New-UDElement -Tag 'div' -Content {
New-UDGrid -Container -Content {
New-UDGrid -Item -ExtraSmallSize 12 -Content {
New-UDPaper -Content {
New-UDCard -Title "Card Title" -Content {
"Card Body"
}
} -Elevation 2
}
}
}
Here’s the output:
Thank you for your reply. Where would I have typically made a change like that so I can have a look?
I’ve got some css stylesheets which are configured at the New-UDApp level and passed in as a parameter, you could try there?
It could also be present in your version, I actually tested this in 4.0.8 so maybe someone else can confirm since I just noticed you’re on 3.9.13
1 Like
What happens if you inspect the boxed area.
Does it show any CSS classes or other objects causing that whitespace?
It could be margin or padding from whatever is inside your card content on line 7
1 Like
Yes, and when I remove padding it resolves:
modified padding in DevTools:
Oh I just realized your card title is the -cardtitle parameter. Should that matter that I am using udSelect and not using that parameter?
up to line 205, the only “Style” is on buttons
I’m running azure container version
-title parameter is a bit further up. Not sure if what I am experiencing is by design or not
I suppose if this is by design, how could I overwrite the padding inline ?
Thanks!
Is there any reason why you are using a card inside a grid?
Also, New-UDCardBody may be of use if you have a genuine use case for a card in your grid.
There are many ways this problem can be worked, depending on if that card is really needed.
adam
July 24, 2023, 4:17pm
12
You can wrap it in a style and set the padding to 0.
New-UDStyle -Content {
New-UDCard -Content {
New-UDTypography 'Test'
}
} -Style ".MuiCardHeader-root { padding: 0px } "
2 Likes
Worked perfectly thanks all that responded! was a lesson for me.
Looks like this causes another gap. I have tried adding to the style but my css skills fail me:
ruben
July 24, 2023, 9:36pm
15
I’ve had a few situations where I’d run into the same styling hurdles as you’re showing.
As others have already mentioned; is there any specific reason for using New-UDCard?
If not, maybe use:
New-UDPaper -Elevation 1 -Content {
New-UDSelect -Id 'Tenant' .... etc
}
Since you’re not using a title for your cards, UDPaper with -Elevation achieves the same style, but without the padding.
I haven’t tried that yet I think, but let me give it a go! Thanks! And there really is no reason other than stylistically, but I may have been caught up in a late night rabbit hole.
ruben
July 24, 2023, 9:38pm
17
Oh trust me, I’ve been down that rabbit hole.
Gotta remind myself to “progress first, polish later” more than I’d like to admit…
I’m with you on that sentiment
I noticed when moving to grid and paper without card is that it doesn’t seem to expand/collapse the same way. Perhaps I’m missing a setting.
Without UDCard
With UDCard
I might leave the gap at the top of the card if there is no way to remediate the introduction of another gap on the right side.
ruben
July 25, 2023, 8:54am
20
How about:
New-UDStyle -Content {
New-UDCard -Content {
New-UDTypography 'Test'
}
} -Style ".MuiCardHeader-root { padding-top: 0px } "
[/quote]
Since “padding” would be for all sides, padding-top would be for the top only.