UdAlert Modal Style

Product: PowerShell Universal
Version: 3.0.1

I’m struggling to set a style on a modal to remove padding. I use UdAlert inside a modal for a popup while some background processes are happening.

If i append a style to the modal, it only applies to the UdAlert content, not the actual modal:

New-UdButton -Text "Test" -OnClick {
    New-UDStyle -Style '{
        padding: 0px !important;
    }' -Content {
        Show-UdModal -Content {
            New-UDAlert -Severity 'info' -Content {
                "hello"
            } -Title ""
        }
    }
}

image

If i add a general class to the whole dashboard with no padding, it works fine, but i cannot target it to one specific modal.

.MuiDialogContent-root {
    padding: 0px !important;
}
.MuiTypography-h6 {
    padding: 0px !important;
}
.MuiDialogActions-root {
    padding: 0px !important;
}
.MuiPaper-root.MuiPaper-elevation {
    padding: 0px !important;
}

I generally use CSS for this and add it in a classname in an element, but this aslo doesn’t work, I think Modals appear to be treated differently.

.div-udalert-pad .MuiDialogContent-root {
    padding: 0px !important;
    height: 200px;
}
.div-udalert-pad .MuiTypography-h6 {
    padding: 0px !important;
}
.div-udalert-pad .MuiDialogActions-root {
    padding: 0px !important;
}
.div-udalert-pad .MuiPaper-root.MuiPaper-elevation {
    padding: 0px !important;
}
New-UdButton -Text "Test" -OnClick {
    New-UdElement -Tag 'div' -Attributes @{ className = 'div-udalert-pad' } -Content {
        Show-UdModal -Content {
            New-UDAlert -Severity 'info' -Content {
                "hello"
            } -Title "Configuring, Please Wait..."
        }
    }
}

This again has the same effect as New-UdStyle (albeit, it works for other elements like UdButton etc). Is there something specific with UdModal, or something i can target in CSS for this? I don’t want to turn padding off for all modals, just ones that contain UdAlert

If this is not targetable, would it be possible to add Show-UdAlertModal, or Show-UdModal -Alert “info” and bake it in with zero padding?

Thanks!

We should probably add a -Style parameter to Show-UDModal to accomplish this. Modals are different than other controls.

1 Like

That sounds ideal. I have been headbutting the wall on this one for a while!

Cheers!

Hi @adam - hate to pressure, but do you have any timelines on this? As you said, modals work differently to other components and im a little stuck here…

Cheers!

This is still slated for our 3.1 release here: -Style for Show-UDModal · Issue #1257 · ironmansoftware/issues · GitHub

2 Likes