This is a migrated thread and some comments may be shown as answers.

RadAlert - align - center - button

6 Answers 361 Views
Window
This is a migrated thread and some comments may be shown as answers.
Vasssek
Top achievements
Rank 1
Vasssek asked on 19 Aug 2010, 02:18 PM
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

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 19 Aug 2010, 03:13 PM
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.
0
Vasssek
Top achievements
Rank 1
answered on 19 Aug 2010, 06:00 PM
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
0
Georgi Tunev
Telerik team
answered on 24 Aug 2010, 08:29 AM
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
0
Vasssek
Top achievements
Rank 1
answered on 22 Oct 2010, 07:02 AM

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
0
Accepted
sherin george
Top achievements
Rank 1
answered on 04 Jan 2011, 04:57 AM
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
0
Roberto
Top achievements
Rank 1
answered on 30 Dec 2011, 11:51 AM
Great!
Fantastic job

Thanks
Tags
Window
Asked by
Vasssek
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Vasssek
Top achievements
Rank 1
Georgi Tunev
Telerik team
sherin george
Top achievements
Rank 1
Roberto
Top achievements
Rank 1
Share this question
or