Adjust width of files uploading area

  • Profile Image
    jrnetwork
    Asked on November 16, 2011 at 06:37 AM

    When the files are uploading to Jotform below the "Select Files" button, they width of the grey area for each file seems to be restricted somehow, and the text or spinning uploading icon moves below the file name.

    How is this able to be altered?

    Thanks, Jason.

  • Profile Image
    mliz
    Answered on November 16, 2011 at 10:51 AM

    You may increase the width of the upload file list by adding the following css code using the  Inject Custom CSS.

    .qq-upload-success {
    width: 300px;
    }

    Here's how to add your custom css:

    1. Open your form in JotForm
    2. Click on 'Setup & Embed'
    3. Choose 'Preferences'
    4. Select 'Form Styles'  and enter the code above in the Inject Custom CSS section.



    Thanks for using JotForm!

  • Profile Image
    jrnetwork
    Answered on November 16, 2011 at 11:03 AM

    I did that, on this page:

    http://www.cndesign.com.au/file-uploads.php

    And it's made no difference when I inject:

    .qq-upload-success {
    width: 300px;
    }

  • Profile Image
    jrnetwork
    Answered on November 16, 2011 at 11:11 AM

    Okay, I just tested again... it changes the width of the uploaded files section, but only once the file has uploaded to Jotform, waiting for the user to click the 'send now' button.

    But whilst the files are actually uploading, the small grey line is the original width, which makes things drop down below it if the file name is slightly longer.

    So can it be changed for whilst it's uploading, the width?

  • Profile Image
    fxr
    Answered on November 16, 2011 at 02:20 PM

    try : 

    .qq-upload-list { width: 300px !important; }


  • Profile Image
    jrnetwork
    Answered on November 17, 2011 at 03:45 AM
    Hi,I put this part in:.qq-upload-list { width: 300px !important; }and it made the grey upload list part larger whilst it's uploading, but the little black spinning icon is still right towards the left and blocks off the file name. You can see that here: http://dl.dropbox.com/u/1775774/black-spinner.png
  • Profile Image
    idarktech
    Answered on November 17, 2011 at 04:04 AM

    Hi,

    You can also change the spinner position by customizing this CSS Code:

    .qq-upload-spinner {

    margin-bottom: 1px;

    margin-left: 50px;

    }

    Let us know if that helps. Thank you so much!

  • Profile Image
    jrnetwork
    Answered on November 17, 2011 at 04:11 AM

    Okay, I did that, and I made it 200px margin, and the file name still does not show. You can see that here:

    http://dl.dropbox.com/u/1775774/black-spinner2.png

    Anyway of allowing the file name to show now?

  • Profile Image
    idarktech
    Answered on November 17, 2011 at 04:51 AM

    You can not actually view the whole file name as it's automatically truncated, but you can see some few lines on the first and last name of the file by using the code below.

    .qq-file-uploading {

    width: 300px;

    }

    Just let me know if this doesn't work. Thank you so much.

  • Profile Image
    jrnetwork
    Answered on November 17, 2011 at 05:58 AM

    Okay I've been experimenting for a couple of hours and have found some issues if I use the css inject code:

    .form-all {
    float: left;
    }

    If I use that, I have found that in firefox and opera, if a user uploads lots of files, the bottom files and the 'send' button are out of view. I've tried this witht the embed code, and the iframe. I've also tried wrapping the code in a div with a min-height.

    Firefox with iFrame: http://dl.dropbox.com/u/1775774/firefox-iframe.png

    Firefox with embed code: http://dl.dropbox.com/u/1775774/firefox-embed.png

    However, if I remove the float-left code above, you'll see the form is centred in the page, but then all of the files and the submit button are in view, as seen here:

    http://dl.dropbox.com/u/1775774/firefox-not-floated-left.png

    So the float left code is somehow interfering with the form. The only way I can get the form to appear to align to the left of my page is to set the width of the overall form under the embed area then form styles->form width the the overall width of my content area. In my case that's 880px wide for the form. This gives the appearance of the form being floated left, and can be seen here in firefox:

    http://dl.dropbox.com/u/1775774/firefox-embed-not-floated-but-width-880px.png

    Hopefully this information can help to have this product improved upon. I'm will to be contacted and provide as much info as you like, but I've give heaps above already. I've tried with embed, iframe and the only ones that work if you leave the float-left on there are the lightbox and the popups.

     

  • Profile Image
    fxr
    Answered on November 17, 2011 at 06:14 AM

    This is not any kind of bug, its an issue with how you are implementing the custom css. 

    .form-all is a css class , it could interfere with the rules of more than one element on the form.

    You can try finding the html id of the entire form element and apply the float:left to that particular selector rather than it and its children. the id will be contained in HTML tag beginning with :

    <form class="jotform-form" action=..... > 

    you rule will start with hash and look something like this:

    #1234678901  float: left; }

    remove the old .form-all

    remember rule starting with a # are for specific elements, rules beginning with a . are for classes, (or set of elements)

    Hope that helps.


     


  • Profile Image
    jrnetwork
    Answered on November 17, 2011 at 06:20 AM

    How do I find the html id of the entire form? I've looked in the source code of the page and can't see it:

    http://www.cndesign.com.au/file-uploads.php

  • Profile Image
    fxr
    Answered on November 17, 2011 at 06:40 AM

    Inspect the code of the form itself at http://form.jotform.com/form/13181419557

    its: 13181419557 (same as your unique form ID on JotForm)

    I havent tested my suggestion above, but all your forms css elements/classes are in that code, its just standards compliant html and its all accessible for you to do your customisations with css.