RadAlert - align - center - button

7 posts, 1 answers
  1. Vasssek
    Vasssek avatar
    181 posts
    Member since:
    Aug 2010

    Posted 19 Aug 2010 Link to this post

    Hello,

    I wonder If somebody knows how to create center align button in RadAlert ? I've tried some css tricks (.rwpopupbutton class) but without success :(

    In the attachment there is a picture which describes my request:
    Red rounded rectangle shows standard position of button.
    Green rounded rectangle is what I need to achieve.

    Could you help me please to solve this issue ?

    Best regards

    Vasssek
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Aug 2010 Link to this post

    Hello,


    One suggestion to apply css to align the button. Set appropriate value for margin-left in order to center the button properly.

    Style:
    <style type="text/css"
    .rwPopupButton 
       margin-left: 30px !important;   
    </style>


    Thanks,
    Princy.
  3. Vasssek
    Vasssek avatar
    181 posts
    Member since:
    Aug 2010

    Posted 19 Aug 2010 Link to this post

    Hmm,

    I considered this option, but I called RadAlert with parameters (width, height), that's way the RadAlert has each time different width.
    So your solution can be used just for static radalert width, which is not my case :-(

    Maybe it can be done via javascript, get radalert window width then dynamically change margin position of popupbutton...
    Do you have some idea or example how to do it ?

    I really appreciate your help...

    Have a nice day.

    Vasssek
  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 24 Aug 2010 Link to this post

    Hi Vasssek,

    Currently RadWindowManager's confirm, prompt and alert popups do not support repositioning of the content elements (based on the size of the popup) out of the box. The content templates for these dialogs are pure HTML and you can try achieving the desired result with a custom structure and CSS. More information on RadWindowManager's templates is available here.

    Kind regards,
    Georgi Tunev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Vasssek
    Vasssek avatar
    181 posts
    Member since:
    Aug 2010

    Posted 22 Oct 2010 Link to this post

    Hello,

    I've solved my problem how to center OK button in Rad alert via  jquery. Maybe it will be useful for somebody else :-))

    Server side code:

    alertmessage = "U tejto objednávky už bol vykonaný schvaľovací proces na úrovni<br/> <br/>";
    titlemessage = "Warning";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "myKey", "AlertMessage('" + alertmessage + "',270,160,'" + titlemessage + "');", true);

    Client side code:

    <script type="text/javascript">   
      
    function AlertMessage(message, width, height, title) {
        var oWnd = radalert(message, width, height, title);                              
        CenterItem('.rwDialogPopup','.rwDialogText','.rwPopupButton');               
    }
      
    function CenterItem(parentItem, subparentItem, theItem) {
        var parentWidth = $telerik.$(parentItem).outerWidth();
        var subparentWidth = $telerik.$(subparentItem).outerWidth();
        var itemWidth = $telerik.$(theItem).outerWidth();
      
        var theCenter = parentWidth / 2 - (parentWidth - subparentWidth) - itemWidth / 2;
      
        if (theCenter>0) $telerik.$(theItem).css('margin-left', theCenter);
        else $telerik.$(theItem).css('margin-left', '0');
    }
    </script>

    The result is in the attachments...

    Best regards
    Vasssek
  6. Answer
    sherin george
    sherin george avatar
    2 posts
    Member since:
    Jan 2010

    Posted 03 Jan 2011 Link to this post

    Hi all,
    Thanks to Vasssek in the first place for providing the script.

    A modified version of the above script may be written as below. This has two improvements

    a) Support for the radconfirm (the last parameter will need to pass the Boolean value indicating it is a radconfirm or not)
    b) The style changes have been done on the parent div where the button appears. This will make the buttons grouped together always



    function CenterItem(parentItem, subparentItem, theItem, isRadConfirmShown) {
        var parentWidth = $telerik.$(parentItem).outerWidth();
        var subparentWidth = $telerik.$(subparentItem).outerWidth();
        var itemWidth = $telerik.$(theItem).outerWidth();

        var theCenter = parentWidth / 2 - (parentWidth - subparentWidth) - itemWidth / 2;
        if ($telerik.$(theItem).length > 0) {
            if (theCenter <= 0) {
                theCenter = 0;
            }
            else {
                if (isRadConfirmShown) theCenter -= 20;

            }
           $telerik.$(theItem)[0].parentNode.style.paddingTop = "6px";
           $telerik.$(theItem)[0].parentNode.style.paddingLeft = theCenter + "px";
        }
    }

    As jquery is already embedded in the radcontrols script files no need to add it separately.

    Best Regards,
    Sherin
  7. Roberto
    Roberto avatar
    5 posts
    Member since:
    Jun 2010

    Posted 30 Dec 2011 Link to this post

    Great!
    Fantastic job

    Thanks
Back to Top