Changing font of CurrentFileName Progress Area

[Kerry]

I'm using a RadUpload object with the RadProgressArea, is there a way to control the font size of the CurrentFileName localization setting...in IE6 or greater this gets much bigger than when displayed within Firefox or chrome, much bigger than any other text within the progressArea such as "Elapsed time", "Total FIles" etc.

Thank You

[Kerry]

Also note I am using 2009 Q2 build 826.35.

[Genady Sergeev]

Hello Kerry,

Which skin are you using? I have tasted the described problem on this online demo. I was not able to reproduce the fault, there was no difference in the size on the different browsers. Can you attach a screenshot of the problem here? Perhaps I am missing something.

Greetings,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kerry]

Hello, I am using the "Default" skin, see the attached screen shots, notice the IE6 version includes the full path and filename while the FireFox version only shows the filename which makes the IE6 version look worse since it has to wrap the text. But you can notice how the font size is different then the rest of the text in the progress area.  Seems the file selection dialog returns the full path in IE but only the filename in Firefox.

Thanks

[Genady Sergeev]

Hello Kerry,

Do you have any CSS classes that interact with the area? The text is definitely too large, which is by no case the default view.

Regarding the font-size, can you please try the following css:

.RadUploadProgressArea ul.ruProgress li.ruCurrentFile span
     {
        font-size:11px;
     }

As for the difference in the displayed filename under FireFox and IE, this is due to the way both browsers handle the file upload. For security reasons, FireFox shall trim the directory patch, whereas IE 6 will preserve it. In order to obtain same view, please use the following code:

<script type="text/javascript">
    function pageLoad() {
        if ($telerik.isIE) {

            var area = $find("RadProgressArea1");
            var currentFile = $telerik.$(".ruCurrentFile span", area.get_element())[0];
            var fileName = currentFile.innerHTML;

            var index = fileName.lastIndexOf("\\");
            if (index != -1) {
                var result = fileName.substring(index + 1);
                currentFile.innerHTML = result;
            }
        }
    }
</script>

Sincerely yours,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kerry]

Yes we do have some css but we have remove it to test...I've noticed now that the same behaivor exists on your Demo Site, please see the attached screen shot.  Notice the Filename is larger than the rest of the text in the progressArea and its blue.

[Genady Sergeev]

Hello Kerry,

Please use the following CSS for all browsers

.ruCurrentFile span
     {
         line-height:16px !important;
         font-size:11px !important;
     }

Feel free to fine tune the pixels until you find an optimal look.

If you want to target IE6 only use the following CSS

* html .ruCurrentFile span
     {
         line-height:16px !important;
         font-size:11px !important;
     }

All the best,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.