Positioning RadAlert buttons via CSS

3 posts, 1 answers
  1. M. R.
    M. R. avatar
    49 posts
    Member since:
    Dec 2009

    Posted 21 Mar 2012 Link to this post

    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.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5811 posts

    Posted 23 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. M. R.
    M. R. avatar
    49 posts
    Member since:
    Dec 2009

    Posted 23 Mar 2012 Link to this post

    Thank you very much Marin, it works.

    Regards,
    M.R.
Back to Top