Center objects in modal

Universal Dashboard Universal Dashboard Help
1

Hi Guys,
I’m hoping its a quick an easy answer but I can’t seem to figure it out. I have a modal which pops up with a ‘please wait’ message and one of the fancy spinners that @psDevUK created (thanks!). I can’t seem to find how to center the text and spinner within the modal. I don’t want to change the theme CSS as I have other modals which I don’t want to apply this to. Is there an easy way to do this?

center

2

Hi @tom.obrien thanks for using the spinkit I published, there is some fancy spinners in there…ok so I guess you now need to look at another custom component developed by Mr Driscoll here is some info on it https://psdevuk.github.io/ud-flix/Bring-more-styles-with-UDStyle/ but you could use this to style a one particular modal.

1 Like
3

Ah fantastic that’s great. That will come in handy for some other things too!

The only way I’ve been able to get both centered without overlapping each other is by having 2 ‘styles’ within the modal (if I apply it to the modal itself it doesn’t center the objects within). It works but it looks like it’s a bit sloppy/inefficient. What do you think?

Show-UDModal -Persistent -Width “300px” -Height “200px” -Content {
New-UDStyle -Style ’
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);’ -Content {
New-UDSpinner -tagName FillSpinner -color “white” -size 30
}
New-UDStyle -Style ’
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);’ -Content {
New-UDHeading -Text “Please wait…” -Size 5 -Color “white”
}
}

1 Like
4

I came across a need to center things in my modals too.
I solved this with a bit of a hacky method using new-udelement, creating a div and using css in the attributes to center align it. but it works.
I just use the following method:

Show-UDModal -Header {

    New-UDHeading -Size 4 -Text "Confirm All"

} -Content {

    New-UDElement -Id "confirmall_div" -Tag div -Attributes @{"style" = @{"margin-left"= "auto";"margin-right"= "auto";width = "80%";'text-align' = "center"}} -Endpoint {

        new-udhtml -markup "Some custom html"

        new-udbutton -Text "Agree" -OnClick {

            #DO Stuff

            Hide-udmodal

        }

    }

}
1 Like
5

Thanks for the suggestion, that seems to work for the text in the modal but the spinner stays to the left which is similar to using a new-udstyle on the modal itself. I had to ‘style’ the spinner separately to the text to get it to work.

1 Like