Custom CSS: Setting Kloudless File Upload button to full width and adding FontAwesome icon to submit button

  • Profile Image
    antdevine
    Asked on March 24, 2017 at 08:38 AM

    One of my forms "Sage" I am having trouble with the width of the Kloudless File Uploader.  Is it possible to set it to 100% width?  I have embedded the form at the bottom of this site: http://dev-sage-developer-roles.pantheonsite.io/ when I change the #upload in chrome developer tools to 100% width the button is the right size, however when I add that css into either the widget css or the main css in jot forms it never pull through to the site.  is it possible todo that?

     

    My next question is with the submit button.  I have added a :before on it and made the before have a fontawesome font family, which is what I usually do on sites, the css is included in the head of the site but the icon still wont pull through and when i view developer tools it comes up with an error.  Is it possible to have font awesome on the submit button?

     

    Thank you for your help

  • Profile Image
    Chriistian
    Answered on March 24, 2017 at 11:50 AM

    Hi there,

    Please see below for the solutions to your concerns.

    1. Setting the Upload files button to 100%

    You have the right piece of code at the Custom CSS tab of your Kloudless File Uploader widget. 

    #upload{

       width:100% !important;

    }

     

    However, it does not work because there is an erroneous code above it and you need to remove it. Please see below.

     

    2. Adding FontAwesome icon to Submit button

    Please add the following to the Inject Custom CSS editor of your form.

    @import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css);

     

    Depending on the icon you want to add, you might have to modify the style for the :before selector you have added. For more information, please see Using Icon Fonts in Your JotForm.

     

    Let us know if you nee further assistance.

     

    Regards.