Why Kloudless File Uploader is not showing properly on mobile device?

  • Profile Image
    Jamiepermission
    Asked on September 26, 2017 at 12:51 PM

    Hi, 
    I'm using Kloudless uploader in my form and have noticed that when opened on a mobile, after the file has been selected, the upload button has been cut-off.
    This leaves the file not uploaded correctly. How can I resolve this? would I need to inject a CSS, and if so, which?

    Secondly I'm trying to find how I can configure a customKloudless App ID. I have minimal knowledge of CSS or api developer coding.


    Thanks

    p.s. If Vinod from Kloudless sees this I hope he can help

  • Profile Image
    Marvih
    Answered on September 26, 2017 at 03:24 PM

    We will answer your other question in a separate thread to avoid confusion.

     Secondly I'm trying to find how I can configure a customKloudless App ID. I have minimal knowledge of CSS or api developer coding.

    https://www.jotform.com/answers/1258390

  • Profile Image
    Marvih
    Answered on September 26, 2017 at 03:27 PM

    I will get back to you once I am done customizing the CSS look on that widget.

  • Profile Image
    Marvih
    Answered on September 26, 2017 at 03:37 PM

    Can you please add this CSS code into your form? https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    @media only screen and (max-width: 615px){

    .computer #uploader .plupload_container .plupload_filelist_footer .plupload_add{

      margin-top: 20px !important;

    }

    }

    .computer #uploader .plupload_container .plupload_filelist_footer .plupload_add {

        

        margin-top: 20px !imporatnt;

     

    }

     

    It should look like this.

    Let us know how it goes.

  • Profile Image
    Vinod
    Answered on September 27, 2017 at 02:27 AM

    Thanks for the CSS. I'm with Kloudless. We are also considering further improvements to make the application more usable on mobile, although I do not have a timeline for this.

  • Profile Image
    ashwin_d
    Answered on September 27, 2017 at 03:02 AM

    Thank you for the update Vinod. Do get back to us if the improvement needs widget to be updated and we will forward it to our backend team.

  • Profile Image
    Jamiepermission
    Answered on September 27, 2017 at 07:05 AM

    Hi Marvih, 
    The CSS code didn't work.
    I also noticed a mistake in the final line 'important spelled incorrectly' and tried that with no success.
    See below to see the cropping issue I'm having on mobile.

  • Profile Image
    ashwin_d
    Answered on September 27, 2017 at 08:40 AM

    I'm sorry for the trouble caused to you. 

    In which form you have injected the above custom css code? I did check your last edited form "Share A Video (Non-Exclusive)" but could not locate any injected custom css code. 

    It seems my colleague shared guide on how to inject custom css code in form instead of widget. I would suggest you to please inject the following custom css code in widget (not in form) and that should solve your problem:

    @media only screen and (max-width: 615px){

    .computer #uploader .plupload_container .plupload_filelist_footer .plupload_add{

      margin-top: 20px !important;

    }

    }

    The following guide should help you:  https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    Please check the screenshot below on how to inject custom css code in widget:


    Hope this helps.

    Do get back to us if the issue persists.

  • Profile Image
    Jamiepermission
    Answered on September 27, 2017 at 09:12 AM

    Hi Ashwin, 
    The issue still hasn't been resolved. I've edited the CSS code in the widgit but the same thing is happening.
    This is the title of the form I am testing it on but will be transferring it to other forms once resolved. "Share A Video (Non-Exclusive)"

  • Profile Image
    Nik_C
    Answered on September 27, 2017 at 12:01 PM

    I checked the form and the below CSS code will fix the problem on most of the phones. The side effect is that it will push a submit button down.

    @media only screen 

    and (max-device-width : 667px) { 

    iframe.kloudless-modal {

        height: 595px!important;

    }

    iframe#customFieldFrame_34 {

        height: 640px!important;

    }

    }

    Please copy and paste it in your Custom CSS Code field, and remove other CSS code you added before.

    This is how it should look:

    I tested on some of the phones I have and it worked fine.

    Let us know how it worked for you.

    Thank you!

  • Profile Image
    Jamiepermission
    Answered on September 27, 2017 at 12:36 PM

    Hi Nik, 
    This has solved the problem. Thank you. I've now moved it to a live form.
    I think for now it'll be ok for the botton to create a bit of space because the UX on mobile allows for them to still scroll to complete the form.
    Thanks

  • Profile Image
    Nik_C
    Answered on September 27, 2017 at 12:55 PM

    Very well, I'm glad it worked.

    I'm afraid that space would have to stay like that since that is the height of the uploader itself. But, as you noticed as well, it doesn't affect the functionality of the form.

    Let us know if we can be of any additional assistance.

    Thank you!