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

Rad Upload Increase the width of select button

6 Answers 207 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Gagan Garg
Top achievements
Rank 1
Gagan Garg asked on 05 Jan 2011, 05:19 PM
Hello Telerik Admin,

Please tell me the way how we increase the width of the Select button in Rad Upload control.

6 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 06 Jan 2011, 02:50 PM
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.
0
Tonino
Top achievements
Rank 1
answered on 24 Feb 2012, 10:06 AM
Hi Gagan!
This works with IE, but does not work in Firefox...
Greetings,
Tonino.
0
Peter Filipov
Telerik team
answered on 28 Feb 2012, 05:43 PM
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.
0
Mohammed
Top achievements
Rank 2
answered on 16 Aug 2012, 12:20 AM
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.
0
Peter Filipov
Telerik team
answered on 16 Aug 2012, 03:49 PM
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.
0
Mohammed
Top achievements
Rank 2
answered on 16 Aug 2012, 04:11 PM
Thanks Peter,
Tags
Upload (Obsolete)
Asked by
Gagan Garg
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Tonino
Top achievements
Rank 1
Peter Filipov
Telerik team
Mohammed
Top achievements
Rank 2
Share this question
or