how to make upload input box wider

  • Profile Image
    laurat2012
    Asked on January 04, 2012 at 07:49 PM

    i have a page with JotForm and PrettyPhoto (lightbox clone) and the PrettyPhoto will not work due to some javascript conflict.  i understand i have to put JotForm in a iframe to get around this.  i have a 'upload file' input box that i would like to make wider to match the rest of the input boxes on my form.
    how do i make the 'upload file' input box wider ?

  • Profile Image
    idarktech
    Answered on January 05, 2012 at 04:41 AM

    Hi,

    I don't think it is possible since file upload changes its own style when viewed on different browsers. If you are using Firefox, you can see input box beside the upload button, but if you are running on Google Chrome it displays different. In short, the file upload is inherent to a browser and cannot be changed.

    Please let us know if you have further questions. Thank you for using JotForm!

  • Profile Image
    laurat2012
    Answered on January 05, 2012 at 06:45 AM

    idarktech,

    thanks, but if i were to download the full script into my website, i can add 'size=41' to the code for the upload input box and it will make it larger.  i understand that it will not do this on all browsers but i would at least like it to be this way on the most popular (IE, FF).  i can not do this of course because as i mentioned, i have another script on my page which does not work because of the JotForm script. So I have to use JotForm within an iframe.  unfortunatly, when i use JotForm within an iframe, i can not access the code to add the 'size=' attribute to the code. 

    is there any way to do this using custom CSS from within JotForm?  maybe using 'input-upload'?

    Thanks for your help!

  • Profile Image
    idarktech
    Answered on January 05, 2012 at 08:31 AM

    Hi Laura,

    Thank you so much for your reply. Unfortunately, you can't do that inside JotForm. If you'd really like the upload input box to aligned with other form fields, you have to download your form's source code and insert your size="value"  line. After that, upload your form to your host, get your form link and embed it using iFrame code below:

    <iframe src="http://www.yourwebsite.com/my_form.html" width="200" height="200"></iframe>

    You are still free from code conflict, the only difference is you've hosted the form. If you have further questions, please let us know. Have a great day!

  • Profile Image
    laurat2012
    Answered on January 05, 2012 at 04:32 PM

    it worked perfectly!

    thanks !