Kendo Async Upload - Icon Clipped

[Paul]

 Hi there,

We have developed a website for a client who requires file upload functionality. In order to provide this, we have used the Telerik MVC Upload control operating in Async mode.

The client has commissioned an external testing company who have raised a bug about the exclamation mark icon, which is displayed when a file fails validation. This only appears to happen at certain screen resolutions.

I have been able to reproduce this in your demo - see attached screenshot.

Steps:

1. Use an Upload control in asynchronous mode which has validation e.g. only PDFs allowed
2. Select an invalid file - the exclamation mark should be displayed
3. Shrink the screen width - the icon will at different times be clipped to the right or left depending on the resolution.

Thanks,

Paul

[Ivan Danchev]

Hi Paul,

We checked the Upload's behavior in the Validation demo, but were unable to reproduce the issue with the icon being clipped when resizing the window. Here's a screencast showing how it looks like in Chrome. Is the issue reproducible in a specific browser (Chrome, Firefox, IE11) or it is exhibited in different browsers? Are there any other steps we need to follow in order for the behavior in question to be reproduced?

Regards,
Ivan Danchev
Telerik by Progress

[Paul]

Hi Ivan,

The screenshot I've sent shows this in Chrome 57, where the left hand edge of the icon is clipped. All I had to do was follow the instructions in my original post.

The issue is even easier to produce in IE11 - I just went straight to your demo site (http://demos.telerik.com/aspnet-mvc/upload/validation) and uploaded a PNG file into the "PDF" upload control - the exclamation mark displayed has the left edge clipped off.

The same actions in Firefox 52.01 produce the same icon which is very slightly clipped to the right.

Also, the same client has raised another issue - with long file names. If you select a file with a very long file name and shrink the browser width, the file name will eventually lap over the bounds of the control. This is reproducible in Chrome, Firefox and IE.

 

The actual bug the client raised was during mobile browser testing - on a Galaxy S6. Please find attached the screenshot. Strangely, there seems to be different behaviour of the first and second upload controls in the screenshot.

[Ivan Danchev]

Hi Paul,

Thank you for the additional information provided.

We were able to reproduce the icon clipping and logged it for fixing. Here's the logged issue in our Github repo, through which the bug's status can be tracked.

As a workaround you can give the following CSS rule a try:

  .k-upload-status .k-i-warning {
    min-width: 1.1em;
}

As for the filename text leaving the boundaries of the Upload, we logged it as a separate bug.

A possible workaround that wraps the text avoiding the current behavior:

.k-file-name {
  word-break: break-all;
  white-space: normal;
}

I updated your Telerik points for your involvement in identifying these issues.

Regards,
Ivan Danchev
Telerik by Progress