Rad Upload Increase the width of select button

Thread is closed for posting
7 posts, 0 answers
  1. Gagan Garg
    Gagan Garg avatar
    28 posts
    Member since:
    Jul 2009

    Posted 05 Jan 2011 Link to this post

    Hello Telerik Admin,

    Please tell me the way how we increase the width of the Select button in Rad Upload control.
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 06 Jan 2011 Link to this post

    Hello Gagan,

    Depending on the size that will work for you, you can apply either one of the following two styles to your upload control:

    .largeBrowseButton .ruBrowse
    {
        background-position-y: -45px !important;
        height: 24px !important;
        width: 115px !important;
    }
    .mediumBrowseButton .ruBrowse
    {
        background-position-y: -22px !important;
        height: 24px !important;
        width: 80px !important;
    }

    The RadUpload control has about three button sizes. The default one is the smallest, but the sprite includes two others, those are the two I'm using in the above CSS styles. You just need to set the CssClass of the RadUpload control to "largeBrowseButton" or "mediumBrowseButton", depending on which one will fit the text better.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tonino
    Tonino avatar
    107 posts
    Member since:
    Nov 2007

    Posted 24 Feb 2012 Link to this post

    Hi Gagan!
    This works with IE, but does not work in Firefox...
    Greetings,
    Tonino.
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 28 Feb 2012 Link to this post

    Hi Tonino,

    Background-postion-y property is not supported by all browsers. Review the following article.

    As a resolution for your issue you can use the following CSS:
    .RadUpload .ruBrowse
    {
        background-position: 0 -45px !important;
        height: 24px !important;
        width: 115px !important;
    }


    Kind regards,
    Peter Filipov
    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.
  6. Mohammed
    Mohammed avatar
    87 posts
    Member since:
    Aug 2011

    Posted 15 Aug 2012 Link to this post

    Hi,
    I used the above CSS and it is working but what if I want the width to be 140px for example.
    and I noticed that the mouse over effect is not working anymore if I use the custom class so how can make it works back.
  7. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 16 Aug 2012 Link to this post

    Hello Zin,

    Please review the following markup. I correct the style and now the hover state is enabled.
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadUpload .ruFileWrap .ruBrowse
            {
                background-position: 0 -45px;
                height: 24px;
                width: 115px;
            }
             
            #RadUpload1 .ruFileWrap .ruButtonHover
            {
                background-position: 100% -45px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="foo">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager">
            </telerik:RadScriptManager>
            <telerik:RadUpload runat="server" ID="RadUpload1">
            </telerik:RadUpload>
        </div>
        </form>
    </body>

    In case that you want to create bigger button and our sprite image does not support it you should create your own and style the RadUpload accordingly.

    Regards,
    Peter Filipov
    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.
  8. Mohammed
    Mohammed avatar
    87 posts
    Member since:
    Aug 2011

    Posted 16 Aug 2012 Link to this post

    Thanks Peter,
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017