Select Button text label in Kendo Upload Mis-aligned label after file is selected

[Silver Lightning]

Hi Telerik Team,

Good day!

I would like to ask for your help with regards to text label of "Select" button is mis-aligned after I selected the file in Kendo Upload.

I already adjusted the height of my div in html, still the text label is mis-aligning and not in the center or middle.

I'm using async upload and I use IE-11 browser (Internet Explorer 11)

Thank you in advance for your immediate Help and Solution.

[Dimiter Madjarov]

Hello Jesureno,

I am unable to reproduce the issue in our demos page, which uses the same Kendo UI version. Could you let us know of the exact steps to take in order to reproduce it or send us an isolated runnable example that demonstrates the case?

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

Did you try it on IE-11?

[Dimiter Madjarov]

Hello Jesureno,

Yes, we are testing on IE 11. Is the issue reproducing on the demos page on your end?

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

try the autoupload = false


here's my code:


<div id="filesDivID">
    <input type="file" name="files" id="files" />
    <div style="height:5px;"></div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        var successFlag = false;

        $("#files").kendoUpload({
            async: {
                saveUrl: "@Url.Content("~/FileAttachment/FileAttachmentUploadFile")",
                removeUrl: "@Url.Content("~/FileAttachment/RemoveFile")",
                autoUpload: false,
                multiple: false,
                batch: true,
                value: 'Add'
            },
            localization: {
                select: "Select a file",
                uploadSelectedFiles: "Add",
                headerStatusUploaded: "Process complete",
                headerStatusUploading: "Uploading file, please wait...",
                statusFailed: "File processing failed",
                statusUploaded: "File validating...",
                statusUploading: "On-process..."
            },
            select: function (e) {
                
            },
            progress: function (e) {
                e.sender.localization.statusUploading = e.percentComplete;
            },
            upload: function (e) {
                var files = e.files;
                this.element.prop("disabled", true);
                this.element.closest(".k-button").addClass("k-state-disabled");
            },

            success: function (e) {
                showErrorMsgs(e.response, 'windowDialog');
                if ($.isEmptyObject(e.response)) {
                    successFlag = true;
                    gridReload('gridProjectAttachment');
                } else {
                    successFlag = false;
                    e.preventDefault();
                    resetUpload();
                }
            },
            complete: function (e) {
                if (successFlag) {
                    var kendoWindow = $("<div />").kendoWindow({
                        title: "Upload Information",
                        height: 110,
                        width: 210,
                        resizable: false,
                        modal: true,
                        visible: false
                    });

                    kendoWindow.data("kendoWindow")
                               .content($("#upload-complete").html())
                               .center().open();
                    kendoWindow
                            .find("button")
                            .click(function () {
                                resetUpload();
                                kendoWindow.data("kendoWindow").close();
                            })
                }
                this.element.prop("disabled", false);
                this.element.closest(".k-button").removeClass("k-state-disabled");
            },
            remove: function (e) {
            },
            error: function (e) {
                successFlag = false;
                window.location.href = window.location.protocol + '//' + window.location.host + '/Error/Index'
            }
        });
    });



    function gridReload(gridID) {
        $('#' + gridID).data(kendoGrid).dataSource.read();
    }

    function resetUpload() {
        $(".k-upload-files.k-reset").find("li").remove();
        $(".k-upload-files.k-reset").find("li").parent().remove();

        $(".k-upload-files").remove();
        $(".k-upload-status").remove();
        $(".k-upload.k-header").addClass("k-upload-empty");
        $(".k-upload-button").removeClass("k-state-focused");
    }
</script>


I hope you could help me on this. Thank you in advance :)

[Dimiter Madjarov]

Hello Jesureno,

The issue is not reproducing on our end. Here is a Dojo example, in which I added the sample code from the previous post. The button text is positioned as expected after a file is selected.

Could you reproduce the issue in my example?

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

Can you enclose it to DIV?

Thank you in advance for your kind help and solution

[Dimiter Madjarov]

Hello Jesureno,

If the issue is still reproducing on your end, modify the example from my previous post in order to reproduce it, so we could inspect it locally.

Regards,
Dimiter Madjarov
Telerik

 

 

[Silver Lightning]

Hello Dimiter,

Here's the updated code.

   @* ========== Attachment ========== *@
            <div class="panel panel-default ">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse8">
                            <span style="font-size:14px;">Attachments</span>
                        </a>
                    </h4>
                </div>
                <div id="collapse8" class="panel-collapse collapse">
                    <div class="panel-body">
                       <div id="filesDivID">
                            <input type="file" name="files" id="files" />
                            <div style="height:5px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <script type="text/javascript">
    $(document).ready(function () {
        var successFlag = false;

        $("#files").kendoUpload({
            async: {
                saveUrl: "@Url.Content("~/FileAttachment/FileAttachmentUploadFile")",
                removeUrl: "@Url.Content("~/FileAttachment/RemoveFile")",
                autoUpload: false,
                multiple: false,
                batch: true,
                value: 'Add'
            },
            localization: {
                select: "Select a file",
                uploadSelectedFiles: "Add",
                headerStatusUploaded: "Process complete",
                headerStatusUploading: "Uploading file, please wait...",
                statusFailed: "File processing failed",
                statusUploaded: "File validating...",
                statusUploading: "On-process..."
            },
            select: function (e) {
                
            },
            progress: function (e) {
                e.sender.localization.statusUploading = e.percentComplete;
            },
            upload: function (e) {
                var files = e.files;
                this.element.prop("disabled", true);
                this.element.closest(".k-button").addClass("k-state-disabled");
            },

            success: function (e) {
                showErrorMsgs(e.response, 'windowDialog');
                if ($.isEmptyObject(e.response)) {
                    successFlag = true;
                    gridReload('gridProjectAttachment');
                } else {
                    successFlag = false;
                    e.preventDefault();
                    resetUpload();
                }
            },
            complete: function (e) {
                if (successFlag) {
                    var kendoWindow = $("<div />").kendoWindow({
                        title: "Upload Information",
                        height: 110,
                        width: 210,
                        resizable: false,
                        modal: true,
                        visible: false
                    });

                    kendoWindow.data("kendoWindow")
                               .content($("#upload-complete").html())
                               .center().open();
                    kendoWindow
                            .find("button")
                            .click(function () {
                                resetUpload();
                                kendoWindow.data("kendoWindow").close();
                            })
                }
                this.element.prop("disabled", false);
                this.element.closest(".k-button").removeClass("k-state-disabled");
            },
            remove: function (e) {
            },
            error: function (e) {
                successFlag = false;
                window.location.href = window.location.protocol + '//' + window.location.host + '/Error/Index'
            }
        });
    });



    function gridReload(gridID) {
        $('#' + gridID).data(kendoGrid).dataSource.read();
    }

    function resetUpload() {
        $(".k-upload-files.k-reset").find("li").remove();
        $(".k-upload-files.k-reset").find("li").parent().remove();

        $(".k-upload-files").remove();
        $(".k-upload-status").remove();
        $(".k-upload.k-header").addClass("k-upload-empty");
        $(".k-upload-button").removeClass("k-state-focused");
    }
</script>

Based on above code, the generated select button is always squeezing after I selected a file.

I hope you could find me a solution to this.

Thank you in advance for you kind help and support.

God bless...

[Dimiter Madjarov]

Hello Jesureno,

We were able to reproduce the issue on our end. The underlying input element of the Upload widget has a big font size set, so that it is always covering the widget dimensions. It seems that the currently set font size does not work well with Internet Explorer. You could try setting a font size that works well with the current implementation until we find a suitable workaround.
E.g.

.k-upload .k-upload-button input
{
    font-size: 15px !important;
}

Regards,
Dimiter Madjarov
Telerik