I attached you a file!
by default - Localization-Add text is "Add"
i want to rename it to "Add New Attachment", but when i renamed it the width of this button is still the same?
how can I make this right?
by default - Localization-Add text is "Add"
i want to rename it to "Add New Attachment", but when i renamed it the width of this button is still the same?
how can I make this right?
7 Answers, 1 is accepted
0
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
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
0
Em4o
Top achievements
Rank 2
answered on 16 Jul 2010, 02:18 PM
with RAD EDITOR its working perfect
but what about rad-uploader itself ? its not working with rad uploader
<telerik:RadUpload ID="ruAttachment" ExternalDialogsPath="~/controls/EditorDialogs/" runat="server" InitialFileInputsCount="1" LocalizationPath="../RadControls/Upload//Localization" ControlObjectsVisibility="RemoveButtons, AddButton" Width="100%" Font-Names="Verdana" Font-Size="7pt" InputSize="45" Localization-Add="Add New Attachment" Localization-Remove="Remove Attachment" >
</telerik:RadUpload>
but what about rad-uploader itself ? its not working with rad uploader
<telerik:RadUpload ID="ruAttachment" ExternalDialogsPath="~/controls/EditorDialogs/" runat="server" InitialFileInputsCount="1" LocalizationPath="../RadControls/Upload//Localization" ControlObjectsVisibility="RemoveButtons, AddButton" Width="100%" Font-Names="Verdana" Font-Size="7pt" InputSize="45" Localization-Add="Add New Attachment" Localization-Remove="Remove Attachment" >
</telerik:RadUpload>
0
Accepted
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:
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:
Please, find attached raduploadnewbutton.gif showing the result form the above code.
Regards,
Bojo
the Telerik team
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,
#ruAttachmentAddButton
1
{
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
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
0
Em4o
Top achievements
Rank 2
answered on 20 Jul 2010, 09:47 AM
Thanks Bojo
0
Mark
Top achievements
Rank 1
answered on 15 Nov 2011, 09:54 PM
Can you make this any woder that 115px?
I haven't been able to
I haven't been able to
0
Mark
Top achievements
Rank 1
answered on 15 Nov 2011, 09:55 PM
Can you make this any wider than 115px?
I haven't been able to
I haven't been able to
0
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:
Attached is also customButton.gif that necessary 1for the wider button.
Best wishes,
Bozhidar
the Telerik team
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