The upload button turns blue and remains so.

10 posts, 0 answers
  1. Diljeet
    Diljeet avatar
    8 posts
    Member since:
    Jul 2013

    Posted 06 Aug 2013 Link to this post

    Hi,

    Can someone guide me to resolve following issue/bug.

    http://eesea.antheminfotech.net/countries

    Upload button: (Countries, Location type and Terminal type)
    a.      In any of the page, click new
    b.      Click upload and choose any image
    c.      Click cancel
    d.      Bug: The upload button turns blue and remains so.

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Aug 2013 Link to this post

    Hello Diljeet,


    I was unable to reproduce the issue on my side. Could you please provide some additional information, so I could assist you further? A short screen cast of the strange behavior and also a code sample would be very helpful.

    I am looking forward to hearing from you.

     

    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. Diljeet
    Diljeet avatar
    8 posts
    Member since:
    Jul 2013

    Posted 06 Aug 2013 Link to this post

    Hi Dimiter ,
    Sorry i forgot to mention . It is in Firefox only. Is there any way we can create saparate css for different browsers ?
    Plz find attached screenshot.

    Code sample for upload button on my page :
    _________________________________________________________________________
        <tr>
                <td style="padding-top:10px; font-size:12pt;">
                    <label for="Flag" class="required">Country Flag</label>
                </td>
              <td style="vertical-align:middle; padding:10px 0px 0 0;">
                   <img id="imgflag" src="~/Content/images/no_image.png" width="64" height="64" style="float:left;padding-right:15px;"/>
              @(Html.Kendo().Upload()
                .Name("Flag")
                .Messages( m => m.Select("Upload"))
                 .Multiple(false)
                 .HtmlAttributes(new { style = "11.8em" })
            )
                </td>
            </tr>
    ______________________________________________________________________________________________________


  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 07 Aug 2013 Link to this post

    Hi Diljeet,


    Thank you for your assistance and for providing the additional details. I was able to reproduce it on my side too. It turned out that this is a browser issue in Firefox and the button remains focused after a file is selected.

    As a workaround, you could bind to the select event of the Upload and manually trigger the blur of the input element.
    E.g.
    function select(e) {
       var that = this;
       setTimeout(function () {
           $(that.element).blur();
       });
    }

     

    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. Divya
    Divya avatar
    1 posts
    Member since:
    Aug 2013

    Posted 26 Aug 2013 Link to this post

    Hi.. We tried this and it does not seem to work either
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 27 Aug 2013 Link to this post

    Hi,

    We haven't received any other reports for this particular problem. This leads me to believe that it's caused by one or more CSS styles specific to your project.

    Tracking down the offending rules will take some effort, but it's our only option.
    My recommendation is to use the FF developer tools to check the styles applied to the Upload elements (using Rules View). You can toggle them on the fly to see which ones are affecting the widget.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 08 Nov 2013 Link to this post

    I am having the exact same problem and in addition, when the button is first rendered, it does not have a grey box surrounding it (screenshot 1), but after selecting a file, a box suddenly appears (screenshot 2). I have set the following 2 options:
    {
            multiple: false,
            showFileList: false
    }
    I am using Kendo UI Complete v2013.2.918 (using the Bootstrap theme)
    Any additional styling I have is from Twitter Bootstrap 2.3.2 - I have not specifically overridden any styles related to the upload widget
    I am using Firefox 25.0 on a Windows 8 Pro (64 bit) system

    I recently upgraded to this version of Kendo UI; in the previous one (Q2 final release) both problems did not occur.

    I can live with the active "blue" active button, but the box surrounding the upload button totally messes up my application.


  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 08 Nov 2013 Link to this post

    Hi Rinck,


    This is the expected behavior. The wrapping box is not shown initially, but only after a single file is selected. This could also be observed in the Upload demos.

     

    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. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 08 Nov 2013 Link to this post

    That is unfortunate for more than 1 reason:
    * First of all it breaks existing applications' designs, since this is a change from the Q2 release
    * It gives far less flexibilty in designing the UI, since you're forced to use the surrounding box

    I would expect the surrounding box to only ne shown when you're using the showFileList=true option.
    The current setup does not allow me to simply upgrade a regular File input to a Kendo Upload widget.

    My problem in this case is it is an existing application which has a whole bunch of Kendo Upload widgets, and now I need to upgrade Kendo to be able to use the new Scheduler widget, but that breaks existing functionality/screens.

    Is there an easy way to remove the bouding box, either via CSS or jquery?
  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 11 Nov 2013 Link to this post

    Hi Rinck,


    We decided to change the design of the Upload widget in this scenario, because there was no visual indication for the user of what is happening behind i.e. is the file uploaded or not. In order to mimic the old behavior of the widget, you could do the following modifications:
    1. Add these CSS styles to hide the upload status on the right:
      .k-upload-status-total
      {
          display: none;
      }
    2. Execute the following script after the widget is initialized to remove the surrounding box and it's border:
      $(function () {
          $(".k-upload").removeClass("k-header").css("border", "none");
      });
    I hope that this approach will work in the current scenario. I wish you a great day!

    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