What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to position the upload button on the image upload preview widget?

    Asked by stretchandstaple on November 24, 2014 at 05:10 PM

    The upload button is on top of the image after you preview it.  I would like for it to be below it, because people are already going to scroll down when the preview shows, and if the button is back on top of the image they don't understand that they have to scroll back up and click upload, but if it was below it they would see it and understand that they need to click upload.

    Page URL:
    &lt;disabledtype=&quot;text/javascript&quot;src=&quot;http://form.jotf<br/>ormpro.com/jsform/43226274090955&quot;&gt;&lt;/script&gt;

    preview preview widget upload preview scroll and top
  • Profile Image

    Answered by raul on November 24, 2014 at 06:20 PM

    Please allow me some time to see if I'm able to find a way to accomplish this.
    I'll get back with you with my findings.

    Best Regards.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 25, 2014 at 12:00 AM

    Hello stretchandstaple,

    We have received an empty response from you. If you have replied from your emails, please click on the following URL to reply again:  http://www.jotform.com/answers/464213 

    I have also sent a not to my colleague @raul on this.

    Thank you!

  • Profile Image

    Answered by raul on November 25, 2014 at 09:34 AM

    I was able to set a fixed position for the button by injecting custom CSS to the widget.
    In order to do this, you need to open the wizard of the widget in the form editor and look for the Custom CSS textbox

    This is the CSS code that I used:

    #imageContainer {
    position: relative;
    height: 100%;
    overflow: auto;
    display: block;
    }

    .button-container {
    bottom: 0;
    z-index: 99;
    position: fixed;
    }

    .filename-cont {
    margin-bottom: 60px;
    }

    You can see a demo form here: http://form.jotformpro.com/form/43276918258971 please take a look at it and let us know if it works for you.

    If it does, feel free to clone it to your account.

    Thank you.

  • Profile Image

    Answered by stretchandstaple on November 30, 2014 at 05:05 PM

    I tried that CSS, but that doesn't really work, it puts the uploaded image in a scroll box, which does not work for us. It also has the button inside the image, and I would prefer it to be on the bottom.

     

    Maybe if the CSS is just altered a little that can be remedied.

  • Profile Image
    JotForm Support

    Answered by jonathan on November 30, 2014 at 08:32 PM

    Hi,

    I see what you meant when using the CSS code suggested by our colleague

     

    from the original without the custom CSS code

     

    In a way, the suggested CSS code do work also.. it is just that you need to scroll down on the preview image, and to see that the Upload button is actually positioned at the bottom of the preview image.

    Perhaps removing the scroll bar and making the height of the preview image fixed will work already? Please tell us if that will do.

    I will test also how to implement that on the preview image without a scroll bar on the right.

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on November 30, 2014 at 08:48 PM

    Hi,

    I was able to make it work using this modified CSS code

    #imageContainer {

    position: absolute;

    overflow-y:hidden;

    display: block;

    }

    .button-container {

    bottom: 0;

    z-index: 99;

    position: absolute;

    }

    .filename-cont {

    margin-bottom: 60px;

    }

     

     

     

    here is the demo jotform http://www.jotformpro.com/form/43338079319966  you can try.

    Please try this. Inform us if it work or not...

    Thanks.

     

     

  • Profile Image

    Answered by stretchandstaple on December 02, 2014 at 06:18 PM

    That works great, thank you.

  • Profile Image

    Answered by raul on December 02, 2014 at 06:22 PM

    On behalf of my colleague, you're welcome.

    If you need further assistance, please let us know.
    Thank you.