How to make Kloudless File Uploader work on mobile

  • Profile Image
    antdevine
    Asked on March 28, 2017 at 09:03 AM

    When I view the file uploader on mobile the boxes are still on 2 lines and go over the top of each other.  I tried adding in the css to fix this but it just ignores it, is there an option to switch mobile on for this?:

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

        .custom-field-frame, .direct-embed-widgets, .signature-pad-wrapper {

            width: 100% !important;

            height: 2900px !important;

        }

     

        .small-block-grid-2>li {

        width: 100%;

        list-style: none;

        }

    }

     

    The site I am working on is: http://dev-sage-developer-roles.pantheonsite.io/  and the form I am using is called Sage

  • Profile Image
    Ian
    Answered on March 28, 2017 at 12:03 PM

    I am not sure, if I understand the issue correctly. This is how the layout appears on mobile for me

    Could you please specify what am I missing understanding the issue?

  • Profile Image
    antdevine
    Answered on March 28, 2017 at 12:10 PM

    its when you click the upload files button, the blocks inside that all sit on top of each other and i want to remove the scroll bar so the iframe is full height.

  • Profile Image
    BJoanna
    Answered on March 28, 2017 at 03:27 PM

    Is this your issue?

    This issue is related to width of you upload field. To resolve it you can increase the width of your form fields on mobile devices. For example you can reduce padding. 

    You can add this CSS code to your form:

    @media screen and (min-width: 10px) and (max-width: 480px){

    .form-section {

        padding : 5px;

    }

    }

    How to Inject Custom CSS Codes

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    vinodc
    Answered on March 29, 2017 at 03:41 AM

    There is also an open issue on GitHub regarding the File Explorer on iOS: https://github.com/Kloudless/file-explorer/issues/56

  • Profile Image
    antdevine
    Answered on March 30, 2017 at 12:21 PM

    I have tried injecting the css and it doesn't overwrite the mobile layout.

  • Profile Image
    Welvin
    Answered on March 30, 2017 at 02:03 PM

    I also tried injecting a custom CSS codes to adjust the sizes of the images, it doesn't seem to work. I think this is because the widget is loaded in an iframe. vinodc is the developer of this widget, I'm sure they are aware of it now.