The upload button turns blue and remains so.

[Diljeet]

Hi,

Can someone guide me to resolve following issue/bug.

http://eesea.antheminfotech.net/countries

Upload button: (Countries, Location type and Terminal type)
a.      In any of the page, click new
b.      Click upload and choose any image
c.      Click cancel
d.      Bug: The upload button turns blue and remains so.

[Dimiter Madjarov]

Hello Diljeet,


I was unable to reproduce the issue on my side. Could you please provide some additional information, so I could assist you further? A short screen cast of the strange behavior and also a code sample would be very helpful.

I am looking forward to hearing from you.

 

Regards,
Dimiter Madjarov
Telerik

[Diljeet]

Hi Dimiter ,
Sorry i forgot to mention . It is in Firefox only. Is there any way we can create saparate css for different browsers ?
Plz find attached screenshot.

Code sample for upload button on my page :
_________________________________________________________________________
    <tr>
            <td style="padding-top:10px; font-size:12pt;">
                <label for="Flag" class="required">Country Flag</label>
            </td>
          <td style="vertical-align:middle; padding:10px 0px 0 0;">
               <img id="imgflag" src="~/Content/images/no_image.png" width="64" height="64" style="float:left;padding-right:15px;"/>
          @(Html.Kendo().Upload()
            .Name("Flag")
            .Messages( m => m.Select("Upload"))
             .Multiple(false)
             .HtmlAttributes(new { style = "11.8em" })
        )
            </td>
        </tr>
______________________________________________________________________________________________________

[Dimiter Madjarov]

Hi Diljeet,


Thank you for your assistance and for providing the additional details. I was able to reproduce it on my side too. It turned out that this is a browser issue in Firefox and the button remains focused after a file is selected.

As a workaround, you could bind to the select event of the Upload and manually trigger the blur of the input element.
E.g.

function select(e) {
   var that = this;
   setTimeout(function () {
       $(that.element).blur();
   });
}

 

Regards,
Dimiter Madjarov
Telerik

[Divya]

Hi.. We tried this and it does not seem to work either

[T. Tsonev]

Hi,

We haven't received any other reports for this particular problem. This leads me to believe that it's caused by one or more CSS styles specific to your project.

Tracking down the offending rules will take some effort, but it's our only option.
My recommendation is to use the FF developer tools to check the styles applied to the Upload elements (using Rules View). You can toggle them on the fly to see which ones are affecting the widget.

I hope this helps.

Regards,
T. Tsonev
Telerik

[Rinck]

I am having the exact same problem and in addition, when the button is first rendered, it does not have a grey box surrounding it (screenshot 1), but after selecting a file, a box suddenly appears (screenshot 2). I have set the following 2 options:

{
        multiple: false,
        showFileList: false
}

I am using Kendo UI Complete v2013.2.918 (using the Bootstrap theme)
Any additional styling I have is from Twitter Bootstrap 2.3.2 - I have not specifically overridden any styles related to the upload widget
I am using Firefox 25.0 on a Windows 8 Pro (64 bit) system

I recently upgraded to this version of Kendo UI; in the previous one (Q2 final release) both problems did not occur.

I can live with the active "blue" active button, but the box surrounding the upload button totally messes up my application.

[Dimiter Madjarov]

Hi Rinck,


This is the expected behavior. The wrapping box is not shown initially, but only after a single file is selected. This could also be observed in the Upload demos.

 

Regards,
Dimiter Madjarov
Telerik

[Rinck]

That is unfortunate for more than 1 reason:
* First of all it breaks existing applications' designs, since this is a change from the Q2 release
* It gives far less flexibilty in designing the UI, since you're forced to use the surrounding box

I would expect the surrounding box to only ne shown when you're using the showFileList=true option.
The current setup does not allow me to simply upgrade a regular File input to a Kendo Upload widget.

My problem in this case is it is an existing application which has a whole bunch of Kendo Upload widgets, and now I need to upgrade Kendo to be able to use the new Scheduler widget, but that breaks existing functionality/screens.

Is there an easy way to remove the bouding box, either via CSS or jquery?

[Dimiter Madjarov]

Hi Rinck,


We decided to change the design of the Upload widget in this scenario, because there was no visual indication for the user of what is happening behind i.e. is the file uploaded or not. In order to mimic the old behavior of the widget, you could do the following modifications:

1. Add these CSS styles to hide the upload status on the right:
   

   .k-upload-status-total
   {
       display: none;
   }

2. Execute the following script after the widget is initialized to remove the surrounding box and it's border:
   

   $(function () {
       $(".k-upload").removeClass("k-header").css("border", "none");
   });

I hope that this approach will work in the current scenario. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik