RadUpload looks strange in IE 8

Thread is closed for posting
47 posts, 0 answers
  1. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 27 Sep 2011 Link to this post

    I just updated to the latest telerik ajax controls (2011.2 915) and now the RadUpload control looks very strange in IE 8.  No matter what skin I put on it, it just looks like a gray box with a top and right border and no browse button.

    In Firefox it looks correct.


    Any ideas?

  2. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 27 Sep 2011 Link to this post

    Here is my page:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebForm2" %>
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                    Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>

        <telerik:RadUpload ID="RadUpload1" Runat="server" InputSize="50"
                            ControlObjectsVisibility="None" MaxFileInputsCount="1" OverwriteExistingFiles="True"
                            ReadOnlyFileInputs="True" Skin="Web20">
        </telerik:RadUpload>

        <telerik:RadAjaxManager runat="server">
        </telerik:RadAjaxManager>

        </form>
    </body>
    </html>
  3. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 27 Sep 2011 Link to this post

    I was wrong, Firefox is playing up as well.  Works in simple scenario (like my test page) but not when I have it in a table.  It just doesn't appear.
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 29 Sep 2011 Link to this post

    Hi Kevin,

    I've made a sample page with the RadUpload situated in a table trying to reproduce the issue, but to no avail.

    Please open a support ticket and provide a runnable sample page with the issue being reproduced so we could examine it locally.

    All the best,
    Dimitar Terziev
    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
  5. Dirk
    Dirk avatar
    8 posts
    Member since:
    Aug 2011

    Posted 04 Oct 2011 Link to this post

    I have the exact same problem as the OP. Works in IE6 and firefox though.
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 06 Oct 2011 Link to this post

    Hi Dirk,

    Please try to provide a screenshot showing the problem and the implementation that you are using so I could test it locally.

    All the best,
    Dimitar Terziev
    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
  7. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 06 Oct 2011 Link to this post

    Here is a screenshot on my machine that is having the problem with IE 8.  The strange thing is, I tried it on another machine and it works fine in IE 8.

    Here is the page:  Notice I added BackColor="gray" and that color shows up where I would expect the browse button to be.  It still works as long as I click on the text box input and that brings up the file selection dialog.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm4.aspx.vb" Inherits="Temp.WebForm4" %>

     <!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>
    </head>
    <body>
    <
    form id="form1" runat="server">
    <
    telerik:RadScriptManager ID="RadSM1" runat="server">
    </
    telerik:RadScriptManager>
    <
    telerik:RadUpload ID="RadUpload1" runat="server" InputSize="50" ControlObjectsVisibility="None" MaxFileInputsCount="1" OverwriteExistingFiles="True" ReadOnlyFileInputs="True" BackColor="gray" TargetFolder="~/Images/">
    </
    telerik:RadUpload>
    <
    telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" EnableViewState="False"></telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" Skin="Default" Transparency="0" EnableViewState="False">
    </
    telerik:RadAjaxLoadingPanel>
    </
    form>
    </body>
    </html>

     

  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 11 Oct 2011 Link to this post

    Hello Kevin,

    I've tested the sample mark-up provided with the latest official version of the controls and the upload is shown properly in IE8.

    Since you have mentioned that this only happens on your machine, please check whether you have some specific add-on on the browser which might be causing this strange behavior or some custom settings.

    All the best,
    Dimitar Terziev
    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
  9. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 11 Oct 2011 Link to this post

    It has to be something that has changed in the latest version of the Telerik control.  When I reference an older Telerik.Web.UI.dll the RadUpload control displays properly with the browse button (see attached image).  However, when I use the latest version (2011_2_915) the control gets rendered as you saw in my previous post.  The Telerik.Web.UI version that does work is Telerik.Web.UI_2010_2_826.  I also think it was working in version 2011_2_712, but I can't verify that as that version has been replace by 2011_2_915 on my development machine.

    I don't have any toolbars installed in IE 8.

    Can you think of any settings I should be looking at in IE?
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 14 Oct 2011 Link to this post

    Hello Kevin Donahue,

    We are still unable to reproduce the problem, on our side the upload looks pretty fine. Could you please make sure that your IE is configured to display JavaScript errors:

    1) Go to Tools
    2) Internet Options
    3) Advanced
    4) Make sure that there is no thick on "Disable JavaScript debugging"

    If there are no JavaScript errors, however, the upload still renders the same way please install Internet Explorer developer toolbar and check in what mode is your IE running. I am attaching a screenshot showing where you should look.


    All the best,
    Genady Sergeev
    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
  11. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 14 Oct 2011 Link to this post

    Hi Kevin Donahue,

    Please try removing the InputSize setting from your upload declaration. Does the problem persist? We believe that changing the input size triggers such issue in some environments (always with IE8).

    All the best,
    Genady Sergeev
    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
  12. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 21 Oct 2011 Link to this post

    I have a similar issue. With the SP1, the browse button disappear. I'm no longer see any selection but it is there because the upload works.

    I will dig a little bit in the problem next monday. If you find something let me know, I will follow this thread and keep you informed of what I found.



    I'm starting to running out of time right now and I need to deliver something....
  13. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 23 Oct 2011 Link to this post

    Sorry, I've been busy on other things, so its taken me a while to get back to this.

    Ok, so I got rid of the InputSize and, yes, the browse button is now there.  However, my form looks funny if that input is not sized properly.  Is there a work around for this?  Or is this something that will be addressed in a future release?

    I have no javascript errors (my "Disable JavaScript debugging" setting is unticked)

    And after downloading the IE developer toolbar, it says my Browser Mode is IE8 and my Document Mode is IE8 Standards.

    Anything else you want me to check to help solve this issue?

    BTW, Genady, you attached the wrong screen shot.
  14. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 24 Oct 2011 Link to this post

    Interresting! When the InputSize is more than 20 it overlaps the browse button. There is something wrong with the template. How to customize or modify the RadUpload template? This is what I'm looking for and the only workaround I can see.

    [...]

    Definitly, I can't find a workable solution. I reduced de InputSize from 55 to 20 to temporarily fix the problem. The control with is wide enough but the the input size is too small. I hope that this problem will be fixed in the next release.

    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" CdnSettings-TelerikCdn="Disabled"/>
     
     <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableCdn="false" CdnSettings-TelerikCdn="Disabled">
            <Scripts>
              <%--Needed for JavaScript IntelliSense in VS2010--%>
              <%--For VS2008 replace RadScriptManager with ScriptManager--%>
              <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
              <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
              <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>     
     </telerik:RadScriptManager>
     
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
          </telerik:RadAjaxManager>
     
    <telerik:RadUpload ID="RadUpload1" runat="server" InputSize="20" InitialFileInputsCount="1"
                       Width="450px" Skin="Web20" OnValidatingFile="RadUpload1_ValidatingFile"
                       ControlObjectsVisibility="RemoveButtons, AddButton">
         
      <Localization   Select="<%$ Resources:RadUpload, Select %>"
                      Remove="<%$ Resources:RadUpload, Remove %>"
                      Add="<%$ Resources:RadUpload, Add %>"
                      Clear="<%$ Resources:RadUpload, Clear %>"
                      Delete="<%$ Resources:RadUpload, Delete %>" />
     
    </telerik:RadUpload>
  15. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 24 Oct 2011 Link to this post

    Hi Alain,

    You might be able to adjust it using CSS.  You can override the Telerik CSS classes, make sure you use !important if you want to make sure your style gets applied.

    I tried it out in other browsers on my machine.  Firefox seems ok, not sure why I thought that wasn't working before.  Strange that Opera resizes differently to the others.  See my image attached.
  16. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 25 Oct 2011 Link to this post

    Hi guys,

    I believe we are facing a weird filter bug in IE8. The Upload uses an opacity filter to overlay the default file input's Select button. This filter is implemented as an ActiveX control in IE versions 8 and below. As such, it is subject to security settings and can be accidentally disabled. Apart from this, it seems that the filter is failing in if there is Zoom applied to a page. Do you guys use pages that have zoom?

    I've that following suggestion, could you try using this CSS on pages with RadUpload:

    <style type="text/css">
            .ruFileInput
            {
                zoom: 1.03 !important;
            }
        </style>

    Does this change anything?

    All the best,
    Genady Sergeev
    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
  17. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 25 Oct 2011 Link to this post

    Hi Genady,

    I try your suggestion and now I can see the Browse button in IE 8. However, the button is not clickable, the opacity filter for the browse (select) button still overlap the the RadInput field as you can see below.



    With firefox, that works correctly. With IE, the page zoom option seems to change nothing. I let it to 100%.

    Is that help? Do you have another suggestion?

    Thanks
    Alain
  18. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 25 Oct 2011 Link to this post

    Same thing here.  Clicking on the Browse button does nothing.  I have to click on the smaller top-most grey input for the file dialog to come up.

    I don't do anything with zoom on my page.

  19. Dirk
    Dirk avatar
    8 posts
    Member since:
    Aug 2011

    Posted 26 Oct 2011 Link to this post

    Hello,

    I would like to try the mentioned css fixes but the problem is the upload control which shows the problem for me is the one used by the radeditor. it is shown in a radWindow dialog which uses an iframe, thus it does not see the css fix.
    How can I apply these fixes for controls which are not directly controlled by me and loaded in a radwindow?
  20. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 27 Oct 2011 Link to this post

    Hi,

    Before trying the CSS classes first try this:

    Set the following option to "Enable" in Internet Explorer: "Internet Options -> Security -> Internet (or Local intranet) -> Custom Level -> Binary and script behaviors"

    Does the issue persist?

    As for the css classes, simply place

    <style type="text/css">
            .ruFileInput
            {
                zoom: 1.03 !important;
            }
        </style>

    On the page that is opened inside the RadWindow or, in the case with Editor, on the page that contains the editor.

    Greetings,
    Genady Sergeev
    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
  21. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 27 Oct 2011 Link to this post

    Hi Genady,

    In my case the "Binary and script behaviors" option was and it is still enable for the two levels : Internet and Local Intranet.

    The control is working but the Input size is limited to 20 characters. The width of 450px is wide enough and when I try to increase the Input Size, the Browse (select) button disappear and a kind of filter overlap the Input area. The control is still working but the text in the Input area is hidden by this kind of filter. The CSS trick partially fixed the problem by displaying the Browse button but the filter stay there and the button is still not clickable.

    This control was working fine in the previous release and my QA is not happy with this small RadInput. Is it possible to just restore the previous RadUpload control?

    Alain
  22. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 28 Oct 2011 Link to this post

    Mine was already enabled as well for internet, intranet and trusted sites.
  23. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 01 Nov 2011 Link to this post

    Hi all,

    Have you tried applying zoom:1 to the .ruFileInput css class?

    The reason it was working in the previous version and is not working now, is that we have changed the way the invisible input is positioned under the fake input in order to solve annoying bug in IE6/7/8 where the select button was not clickable. However, as it seems, we have introduced another bug, again in IE/6/7/8, where the opacity filter is not applied to the real input in some (yet unknown) cases.

    We have did some changes to the positioning styling for the Q3 beta release. Have any of you guys tried out the beta yet?

    Regards,
    Genady Sergeev
    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
  24. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 01 Nov 2011 Link to this post

    Hi Genady,

    I played a little bit with the zoom factor to the .ruFileInput css class.

    With Zoom factor < 1.02 => No Browse Button available.
    With Zoom factor >= 1.03 => The browse button appears but is not clickable / The filter over the input area start stretching.
    With Zoom factor = 1.05 => The filter almost disappears and the input area became an standard input text / The browse button is still not clickable ( see picture).


    With Zoom factor > 1.06 => The filter totally disappear and the input area is like a standard input text / The browse button is still not clickable / The selection is impossible.

    Then, I installed the the Q3 release, I modified my application because only the default skins seems available, and I have the same problem.

    What can I do?

    Alain
  25. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 08 Nov 2011 Link to this post

    Hi,

    We did slight changes to the RadUpload css for the upcoming Q3 release. More specific, it is now possible to fine tune the file input size. We discovered that decreasing the hidden input size fixes the opacity filter bug. Before the Q3 release, the following style was set to the hidden file input:

    .RadUpload input.ruFileInput
    {
        font: 200px monospace !important;
    }

    As you can see, it is set with !important, so that it is not possible to override it. Now we have removed the important declaration and it is possible to decrease the size and override the default style. Here is how:

    div.RadUpload input.ruFileInput
    {
         font: 50px monospace
    }

    I hope that this helps.


    Kind regards,
    Genady Sergeev
    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
  26. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 08 Nov 2011 Link to this post

    Hi guys,

    We have developed a test whether IE refuses to make file input elements transparent. You can find it here:

    http://jsfiddle.net/VwP5f/




    All the best,
    Genady Sergeev
    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
  27. Alain
    Alain avatar
    7 posts
    Member since:
    Aug 2011

    Posted 08 Nov 2011 Link to this post

    Good News!

    How many time left before the Q3 release? I guess this is for the end of November.

    In mid time, can we do something or we just have to be patient?

    Thanks
    Alain
  28. Kevin Donahue
    Kevin Donahue avatar
    33 posts
    Member since:
    Oct 2009

    Posted 09 Nov 2011 Link to this post

    Is this what that test page should look like?
  29. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1597 posts

    Posted 14 Nov 2011 Link to this post

    Hi Kevin,

    No, it seems that your IE fails to filter the hidden input. Could you please try decreasing the font: 500px monospace. You can try doing with a step of 100px until your reach 100px and then with a step of 20px. Does at some point the problem vanish? Thank you for your cooperation!

    Alain, the Q3 release is due to few days, it should be released by the end of this week. Until it is released, you can try setting the EnableFileInputSkinning property to false.


    All the best,
    Genady Sergeev
    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
  30. Slava
    Slava avatar
    9 posts
    Member since:
    Jan 2011

    Posted 21 Nov 2011 Link to this post

    Genady, I've removed the "InputSize" setting but the "Select/Browse" button still is not showing on the page, in IE8, works fine in IE9 and FireFox. What am I missing? I thought as long as I wouldn't use "InputSize" everything should work properly with the new telerik version.

    <

     

     

    telerik:RadUpload ID="RadUpload1" runat="server" ControlObjectsVisibility="None" Skin="Default" MaxFileInputsCount="1" TabIndex="8">

     

     

     

    <Localization Select="Browse" />

     

     

     

    </telerik:RadUpload>

     

Back to Top