RAD Alert, Confirm Button Alignment

10 posts, 0 answers
  1. Deepak Jain
    Deepak Jain avatar
    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

  2. Fiko
    Admin
    Fiko avatar
    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.
  3. Deepak Jain
    Deepak Jain avatar
    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
  4. Fiko
    Admin
    Fiko avatar
    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.
  5. Deepak Jain
    Deepak Jain avatar
    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    
  6. Fiko
    Admin
    Fiko avatar
    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.
  7. Radmila
    Radmila avatar
    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.
  8. Fiko
    Admin
    Fiko avatar
    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-left50px
        } 
    </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.
  9. Radmila
    Radmila avatar
    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.
  10. Fiko
    Admin
    Fiko avatar
    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> 
                            <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 
        { 
            width40px
        } 
    </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.
Back to Top