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

10 posts, 0 answers
  1. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 05 Feb 2015 Link to this post

    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.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 06 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Did you try it on IE-11?
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Feb 2015 Link to this post

    Hello Jesureno,

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

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 06 Feb 2015 in reply to Dimiter Madjarov Link to this post

    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 :)
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 09 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 09 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Can you enclose it to DIV?

    Thank you in advance for your kind help and solution
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 09 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 09 Feb 2015 in reply to Dimiter Madjarov Link to this post

    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...


  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 10 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready