Changing Title Bar to use wide Close button

10 posts, 1 answers
  1. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 30 Jul 2010 Link to this post

    My client would like to use a close button that has the word close followed by the X.  (They think the current close button is too tiny to be noticed by users.)  The close button is the only button we want to have appear along the top of the window.  I have created a custom skin and updated the sprite (attached), but don't know how to get the window to show the entire close portion of the sprite.  Any clues?  I'm also attaching an image that shows how the close button appears currently.

    Thanks.

    Laurie
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 02 Aug 2010 Link to this post

    Hi Laurie,

    Please, find attached radwindowwideclosebutton.zip. This is a simple project where I am suggesting a possible solution for the custom close button.

    I have used the Default RadWindow Skin for the example. There is a new Sprite created, just for the custom close buttons, which you could find in the project attached. I have also decreased the buttons width from 113px to 93, as there was to much empty space in the image. If you decide to use the old 113px width, you should just change the settings in the CSS.

    Attached is also closebutton.gif showing the custom close button in the browser.

    Best wishes,
    Bojo
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 04 Aug 2010 Link to this post

    Thanks, Bojo.  Worked like a charm!
  5. Chris Mitchell
    Chris Mitchell avatar
    15 posts
    Member since:
    Oct 2009

    Posted 27 Mar 2012 Link to this post

    I do something very similar to this but I am finding that if I use any other buttons in addition to close, my title bar's 'control tray box' (for lack of a better term) breaks onto two lines.. Is there a CSS style I need to set for the overall width of this box to prevent this from happening?
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Mar 2012 Link to this post

    Hello,

    Please, provide us with screenshots and sample code what you are trying to achieve. When using custom buttons each case could be different depending on buttons spcifications and there is not a magical CSS style that could be a painkiller for all cases.

    Take a look how Laurie Dickinson provided screenshots of what he want to ahcive and what is rendered and send us something similar that will help us to provide you with the best solution.

    All the best,
    Bozhidar
    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.
  7. Chris Mitchell
    Chris Mitchell avatar
    15 posts
    Member since:
    Oct 2009

    Posted 28 Mar 2012 Link to this post

    I understand; I just wondered if there was a surrounding container to all of the buttons or something that I had to put a width on..

    Attached is an image of my RadWindow.. I was trying to do this via modifying the .rwCloseButton's CSS as so:

    .rwCloseButton
        {
          position: relative;
          top:   0px;
          right: 4px;
          background-image: url(images/closereport_button.png) !important;
          background-position: 0 0 !important;
          width: 110px !important;
          height: 20px !important;
        }
        .rwCloseButton:hover
        {
            background: url(images/closereport_button.png) 0 -20px !important;
        }

    The RadWindow declaration is:

    <telerik:RadWindow ID="PurchasesDialog" runat="server" Title="View Report Views and Purchases" Behaviors="Reload,Maximize,Close,Move" KeepInScreenBounds="true" Width="850px" Height="600px" Modal="true" Skin="WebBlue" VisibleStatusbar="false" />

    As a side note, I did try the alternate method of doing the custom button (the Print Button example from the KB) in the title bar but in my case, my custom button needs to be a replacement for the Close button and I couldn't seem to get the KB example to work where the button appeared as the last item (farthest right).

    Any help appreciated..

  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Mar 2012 Link to this post

    Hi,

    Try the following code:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
             
             
            .rwControlButtons,
            .rwTitlebarControls em
            {
                display: inline-block;
                zoom: 1;
                *display: inline;
                width: auto !important;
                *width: 145px !important;
            }
             
            .rwCloseButton
            {
                position: relative;
                top: 0px;
                right: 4px;
                background-image: url(closereport_button.png) !important;
                background-position: 0 0 !important;
                width: 112px !important;
                height: 22px !important;
            }
            .rwCloseButton:hover
            {
                background: url(closereport_button.png) 0 -20px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadWindow ID="SummaryRadWindow" runat="server" Behaviors="Close, Maximize, Reload"
            Height="300px" Title="Win Title" Width="400px" VisibleOnPageLoad="true">
            <ContentTemplate>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu nisl eget
                erat elementum porttitor eget sed dui. Curabitur non tristique quam. Pellentesque
                habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                Maecenas lorem enim, pellentesque sed congue at, tincidunt ut justo.
            </ContentTemplate>
        </telerik:RadWindow>
        <br />
        <br />
        <br />
        </form>
    </body>
    </html>

    Attached is closereport_button.png used in my example with height of 22px, if you use different height, you should modify the styles for the hover state.

    All the best,
    Bozhidar
    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.
  9. Chris Mitchell
    Chris Mitchell avatar
    15 posts
    Member since:
    Oct 2009

    Posted 28 Mar 2012 Link to this post

    Thanks; I will give that a try and report back.. I should have noted that I was/am using a very similar sprite for the Close Button..
  10. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 29 Mar 2012 Link to this post

    Hi,

    We will be waiting for your report back.

    Kind regards,
    Bozhidar
    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.
  11. Chris Mitchell
    Chris Mitchell avatar
    15 posts
    Member since:
    Oct 2009

    Posted 29 Mar 2012 Link to this post

    Bozhidar,

    Thank you very much for your help. That worked like a champ!

    Just as a note in case anyone else is doing an oddball situation like mine.. Remember you can apply a CssClass to your RadWindow and then add .<ClassName> in front of the .rwCloseButton,etc from the example.. This was helpful in my case as I have a RadGrid that opens 3-4 different utility windows via Context menu for which I do NOT want this special button.. That button is only used by the main link, which triggers a oWnd.show();

    Anyway, thanks again.. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017