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

Rad Upload - Localisation-Add width issue?

7 Answers 130 Views

Editor

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

7 Answers, 1 is accepted

answered on 16 Jul 2010, 01:37 PM

resizeaddbutton-q12010sp2.zip

Hi Emin,

Here are the steps to increase the width of the Add button:
1) register the external dialogs of RadEditor
2) open the \EditorDialogs\FileBrowser.ascx file and put the following CSS classes in it:

<style type="text/css">
    .RadUpload #RadFileExplorer1_upload1AddButton.ruButton, .RadUploadProgressArea #RadFileExplorer1_upload1AddButton.ruButton
    {
        background-position: 0 -46px !important;
        width: 130px !important;
    }
    .RadUpload #RadFileExplorer1_upload1AddButton.ruButton, .RadUploadProgressArea #RadFileExplorer1_upload1AddButton.ruButton
    {
        background-position: 0 -46px !important;
        width: 130px !important;
    }
    .RadUpload #RadFileExplorer1_upload1AddButton, .RadUploadProgressArea #RadFileExplorer1_upload1AddButton
    {
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }
</style>

3) Save the file.

For your convenience I have attached my test project.

Best wishes,
Rumen
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

Accepted

answered on 20 Jul 2010, 08:40 AM

raduploadnewbutton.gif

Hello Emin,

It is not working with RadUpload, as for the button fix in RadEditor, we have used RadEditor classes. In order to make it work in RadUpload, it is necessary to use RadUpload classes. Using the code provided, I have created a simple code example, showing how to increase the button width in order to have "Add New Attachment" well wrapped in a button:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

#ruAttachmentAddButton

{

background-position:0 -46px !important;

width:115px !important;

padding-left: 0 !important;

padding-left: 3px\9 !important;

text-align: left !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadEditor runat="server" ID="RadEditor1" ExternalDialogsPath="~/EditorDialogs">

<ImageManager ViewPaths="~/" UploadPaths="~/" />

</telerik:RadEditor>

<telerik:RadUpload ID="ruAttachment" ExternalDialogsPath="~/EditorDialogs/"

runat="server" InitialFileInputsCount="1"

ControlObjectsVisibility="RemoveButtons, AddButton" Width="100%" Font-Names="Verdana"

Font-Size="7pt" InputSize="45" Localization-Add="Add New Attachment" Localization-Remove="Remove Attachment">

</telerik:RadUpload>

</form>

</body>

</html>

Please, note that for the CSS overwrite, I didn`t use the base CSS classes, but the ID: ruAttachmentAddButton in order to avoid increasing the width of another buttons. If you have more than one "Add New Attachment" button on your page, you should group their IDs in the CSS. For example, if the additional "Add New Attachment" buttons has ID="ruAttachmentAddButton1", grouping both buttons will work with the following CSS:

<style type="text/css">

#ruAttachmentAddButton,

#ruAttachmentAddButton1

{

background-position:0 -46px !important;

width:115px !important;

padding-left: 0 !important;

padding-left: 3px\9 !important

; /*fixing padding for IE only*/

text-align: left !important;

}

</style>

Please, find attached raduploadnewbutton.gif showing the result form the above code.

Regards,
Bojo
the Telerik team

answered on 16 Nov 2011, 10:19 AM

customButton.gif

Hello,

The decorated buttons with comes from the RadUpload sprite, the widest predefined background for a button is 115px. If you want to put a wider button, you should create a different wider image and to override the CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

#ruAttachmentAddButton

{

background-image: url(customButton.gif);

background-position:0 0;

width:180px;

padding-left: 0;

padding-left: 3px\9;

text-align: center;

}

#ruAttachmentAddButton:hover

{

background-position:-220px 0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />

<telerik:RadEditor runat="server" ID="RadEditor1" ExternalDialogsPath="~/EditorDialogs">

<ImageManager ViewPaths="~/" UploadPaths="~/" />

</telerik:RadEditor>

<telerik:RadUpload ID="ruAttachment" ExternalDialogsPath="~/EditorDialogs/"

runat="server" InitialFileInputsCount="1"

ControlObjectsVisibility="RemoveButtons, AddButton" Width="100%" Font-Names="Verdana"

Font-Size="7pt" InputSize="45" Localization-Add="Add New Attachment" Localization-Remove="Remove Attachment">

</telerik:RadUpload>

</form>

</body>

</html>

Attached is also customButton.gif that necessary 1for the wider button.

Best wishes,
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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Rad Upload - Localisation-Add width issue?

7 Answers, 1 is accepted