Rad Upload - Localisation-Add width issue?

8 posts, 1 answers
  1. Em4o
    Em4o avatar
    27 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    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?
  2.
  3. Rumen
    Admin
    Rumen avatar
    14431 posts

    Posted 16 Jul 2010 Link to this post

    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
  5. Em4o
    Em4o avatar
    27 posts
    Member since:
    Jun 2010

    Posted 16 Jul 2010 Link to this post

    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>

  7. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 20 Jul 2010 Link to this post

    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">
    <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
    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
  9. Em4o
    Em4o avatar
    27 posts
    Member since:
    Jun 2010

    Posted 20 Jul 2010 Link to this post

    Thanks Bojo
  11. Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2011

    Posted 15 Nov 2011 Link to this post

    Can you make this any woder that 115px?

    I haven't been able to
  13. Mark
    Mark avatar
    5 posts
    Member since:
    Oct 2011

    Posted 15 Nov 2011 Link to this post

    Can you make this any wider than 115px?

    I haven't been able to
  14.
  15. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 16 Nov 2011 Link to this post

    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">
    <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
Back to Top