RAD Alert, Confirm Button Alignment in UI for ASP.NET AJAX Window

Deepak Jain

22 posts

Member since:
Feb 2007

Posted 12 Mar 2009 Link to this post

Hey there

I was looking at the alert, prompt and confirm functionality of RAD window. I am having couple of questions regarding the this.

1. Can I change the buttons alignment to center as the alert buttons are left aligned.

2. Can I change the alert and confirm images from alert and confirm dialogue box.

Thank you,

- Deepak

Fiko

Admin

1406 posts

Posted 16 Mar 2009 Link to this post

Hi Deepak,

Yes, you can change the dialogs' appearances by overriding some of their CSS properties. Please note that the values of the overridden properties are depending on your requirement and the length of the showed text and we cannot provide you with appropriate values that will work in all cases.

At the end, you can examine these CSS properties by using the IEDevToolBar ( under IE) or Firebug ( under FF) tools for example.

I hope this helps.

Greetings,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Deepak Jain

22 posts

Member since:
Feb 2007

Posted 17 Mar 2009 Link to this post

Hi Fiko,

Thank you for replying back. I have tried a lot to make changes as you told us but unable to succedded. Can you provide us some references or some samples where the CSS classes are overridden and such functionality is achieved in past.

Thank you

-Deepak

Fiko

Admin

1406 posts

Posted 18 Mar 2009 Link to this post

Hello Deepak,

Please find the requested demo attached to this thread.

Best wishes,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

centeredbuttons.zip

Deepak Jain

22 posts

Member since:
Feb 2007

Posted 18 Mar 2009 Link to this post

Hi FIko,

Thank you for providing me demo, I have checked attached zip file and found that still buttons are left aligned to text in alert. If you look at standard windows javascript alerts you can see that the OK, Cancel buttons are always aligned to center not at left and I tried to align them but still they are aligned to left.

Can you help me on this.

Thanx

-Suyog

Fiko

Admin

1406 posts

Posted 19 Mar 2009 Link to this post

Hello Deepak,

In the project that I attached, the position of the buttons is centered so I am not sure if I understand you correctly. To avoid further misunderstanding, please open a new support ticket and send us your demo project along with screenshots and detailed explanation / edited screenshot of the desired behavior.
We will rework it according your requirement and send it back to you.

Regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Radmila

20 posts

Member since:
Sep 2007

Posted 13 May 2009 Link to this post

Hi,

I also need to center the alert button.
Was there any resolution for this?
I believe some changes should be made in the CoreTemplates.xml file?

Thanks,
Radmila.

Fiko

Admin

1406 posts

Posted 14 May 2009 Link to this post

Hi Radmila,

You need to add the following code to the head tag on your page :

    
            <style type="text/css"> 
        
                .RadWindow .radalert A.rwPopupButton, 
        
                .RadWindow .radalert A.rwPopupButton:hover 
        
                { 
        
                    margin-left: 50px; 
        
                } 
        
            </style>

The value that I used for the margin-left property is related to the width of the radalert dialog. In your case you need to tweak it in order to achieve the desired result. For your convenience I have attached my test project to the thread.

I hope this helps.

Sincerely yours,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

center-radalert.zip

Radmila

20 posts

Member since:
Sep 2007

Posted 14 May 2009 Link to this post

Hi,

Thanks for the reply. But I'm afraid this is not an acceptable solution for me, I need to set this at one place which will apply to all alerts in my application. Also, the alerts are all with different widths, so I need a general solution.
Previously, when we used the ASP.NET controls, we made some custom modifications to the CoreTemplates.xml files and it worked for all alerts. But now we're migrating to ASP.NET AJAX and I can not make the same adjustments since the logic is a bit different.
I will keep trying, but if you can provide me with some guidelines, or at least confirm to me that it is possible to do that, I would appreciate it.

Thanks,
Radmila.

Fiko

Admin

1406 posts

Posted 18 May 2009 Link to this post

Hello Radmila,

You can center the alert button by using the following modified alert template :

    
            <div> 
        
                <div class="rwDialogPopup radalert" style="padding-left: 0;"> 
        
                    <div class="rwDialogText" style="margin-left: 50px;"> 
        
                        {1} 
        
                    </div> 
        
                    <div> 
        
                        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; text-align: center;"> 
        
                            <tr> 
        
                                <td> 
        
                                    <a style="margin: auto; float: none;" onclick="$find('{0}').close();" class="rwPopupButton" 
        
                                        href="javascript:void(0);"><span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span> 
        
                                        </span></a> 
        
                                </td> 
        
                            </tr> 
        
                        </table> 
        
                    </div> 
        
                </div> 
        
            </div>

You need to add the code above between the AlertTemplate tag in the RadWindowManager's declaration in order to make the button horizontally centered. Additionally, you need to add the following CSS code to the head tag :

    
            <style type="text/css"> 
        
                .rwPopupButton 
        
                { 
        
                    width: 40px; 
        
                } 
        
            </style>

For your convenience I have attached a demo to the thread.

I hope this helps.

All the best,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

custom-radalert.zip