Positioning RadAlert buttons via CSS

[M. R.]

I was going through the following KB article (Centering the buttons of the predefined dialogs and keeping the image aligned to the top):
http://www.telerik.com/support/kb/aspnet-ajax/window/centering-the-buttons-of-the-predefined-dialogs-and-keeping-the-image-aligned-to-the-top.aspx

The code  works fine for default RadAlert dimensions. It also works if I make the RadAlert window wider.
But it will not work anymore if I make RadAlert window 'higher', for example using the following code:

Dim scriptstring As String = "radalert('Welcome to Rad window!', 550, 250);"
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "radalert", scriptstring, True)

The 'Ok' button will be aligned to right but it will stay towards the top right of the window instead bottom-right...
Can you please help to add any additional code that will solve this issue? (and also make the KB article better)

Regards,
M.R.

[Marin Bratanov]

Hello,

The position of this button is determined by the content - if the text is not sufficient to push the button down to the bottom of the dialog it will not be aligned to the bottom.

If you want to have the buttons positioned on the bottom of the dialog you can add a few simple lines of CSS:

.rwDialogText + div,
.rwDialogText + div + div
{
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

You can also make the rules more specific so that they do not affect the RadPrompt directly, as this will position the input at the bottom as well.

The purpose of the KB article is to show how a few lines of CSS can reposition the buttons and the image while keeping the current behavior. You can use it as base and further extend it as you see fit. You can also modify the templates so that you can work with them more comfortably (e.g. add some classes).


Regards,
Marin
the Telerik team

[M. R.]

Thank you very much Marin, it works.

Regards,
M.R.