ProgressArea and Long FileName over-lap

[Joe]

I am using an Upload / RadProgressArea / RadProgressmanager setup, when I upload a file with large file name or file path the "Uploading File" section that displays the current file path you are uploading:  when it is long like this the file name over-laps out of the progress area box.  If this does not make sense, see the link example below and try to upload a large file name:

- Is there a quick fix for this or anyone run into this?  Obviously an issue with the control if I can re-produce it with an actual Telerik example:

http://demos.telerik.com/aspnet-ajax/upload/examples/customprogress/defaultcs.aspx?RadUrid=aa2c4886-2391-493d-a694-ed234a357989

[Genady Sergeev]

Hello Joe,

I have tried to upload a file with a very long file name, using the link to our demos that you have provided. There is no overlap as far as I can see. Please check the screenshot attached. Is this what you have had in mind? I will appreciate if you can provide screenshot of the issue thus we can investigate it.

Greetings,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Joe]

Hello, that is because you have spaces in the file name, I cannot have spaces in this system.  I cannot attach files here, but I uploaded a snapshot here, you will see what I mean:  http://www.fronseetest.com/_RootImages/overlap.jpg
- Still from the Telerik samples.

- Looks awful.  Thank you for your help.  Too bad no one else has ran into this before.

Joe

[Genady Sergeev]

Hello Joe,

You can use the following CSS to work around this issue:

Genady Sergeev

[Joe]

Hmm, no CSS appeared in your last post.  Did you forget to paste it? I imagine you are just setting a width on it.  Thank you.

[Genady Sergeev]

Hi Joe,

Please excuse me, here is the CSS that fixes the ovelrap:

    <style type="text/css">
        .RadUploadProgressArea .ruProgress li.ruCurrentFile
        {
            overflow:hidden !important;
            padding-bottom:5px !important;
        }
    </style>

Regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Joe]

Yeah that is pretty good.  Im going to play with it a little.  It just cuts it off, I would like it to keep it within the box, but also see the full name.  In other words have the text wrap down an extra line or 2 so you can see the whole filename.  Let me know if you see a quick fix for this, i will mess with the CSS also.  Thank you though, i didn't know we could just put Styles directly in the telerik controls.

[Joe]

Oh, and if you try it in IE (I am using IE 7), the right border of the progressarea disappears.  If you can find a quick fix for my last issue about word-wrap, and this IE issue, would be appreciated.  Thank you

[Genady Sergeev]

Hi Joe,

The problem with the border is in concern with the shadows applied to the progress area. Somehow Overflow:hidden has broken them. I suggest you to use the following CSS in order to workaround the issue.

<style type="text/css">
        .RadUploadProgressArea .ruProgress li.ruCurrentFile
        {
            overflow:hidden;
            word-break: break-all;
            padding-bottom:2px;
            line-height: 1.5em;
            white-space: nowrap;
        }
        * html .RadUploadProgressArea .ruProgress li.ruCurrentFile { white-space: normal; }
        *+html .RadUploadProgressArea .ruProgress li.ruCurrentFile { white-space: normal; }

        #progArea_Panel
        {
            font-size: 0;
            line-height: 0;
        }

        .RadUploadProgressArea .ruShadow,
        .RadUploadProgressArea .ruShadow > div,
        .RadUploadProgressArea
        {
            background: none !important;
        }

        #progArea_Panel .ruProgress
        {
            font: 11px/1.5px "Segoe UI", Arial, sans-serif;
        }
    </style>

You can use the last part (#progressArea_Panel .ruProgress) to tune the fonts.

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Joe]

That looks good, in IE at least.  That should be good enough for me, but if you know a quick fix to get it to work in FIrefox that would be good.  It still just cuts it off at the end.  Firefox's CSS engine or whatever its called doesnt like that word-wrap stuff, i read online a similar issue.  Thanks a lot though.

Joe

[Genady Sergeev]

Hello Joe,

FireFox 3 still does not support the word-break property. However it is a part of the CSS3, so we can expect a support added in the near future. By  now, unfortunately, there is no resolution to this issue. 

All the best,
Genady Sergeev