Remove gap at top if New-UDGrid / New-UDPaper

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

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

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?

Here is more of the code

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.

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

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:

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.

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.

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.

Thanks @AnonymousUser but this gives me this result. Which I presume is width. I did try to manipulate width but didnt seem to have an effect:

Okay, then try:

New-UDStyle -Content {
        New-UDCard -Content {
            New-UDTypography 'Test'
        }
    } -Style ".MuiCardHeader-root { padding-top: 0px; padding-right: 0px; } "

Same thing but I am going to lay this down for a while and “progress now” as you said thank you!