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

    Order form product items images were not properly aligned on the form.

    Asked by milladesignmaccom on May 11, 2016 at 02:53 AM

    Hi.

    It's soon time for my customer to use the order form, but it looks really "untidy", is it any possibility to get it more in line, with the same spacing between the products, now its all different spacing ...

     

    http://elisabethtalen.no/bestillingskjema-privat.html#bestilling-privat

    Page URL:
    http://elisabethtalen.no/bestillingskjema-privat.html#bestilling-priva<br/>t

    Screenshot
    order form products
  • Profile Image
    JotForm Support

    Answered by jonathan on May 11, 2016 at 03:12 AM

    I assume this is the form https://www.jotformeu.com/form/60761421462349 which actually belongs to another account. You must be the sub-user of the main account that owns the form. Please correct if this is not the form.

    --

    I checked on the website and I can say that the current setup of the form is alright as the column positioning of each images were aligned already.

     

    The issue it has why it appears distorted is the height dimension of the images. They are not uniform for all. The width is fixed already.

    I will work on a fix to correct the height dimension so that the images will all have uniform dimensions. I'll get back to this shortly.

     

     

     

  • Profile Image

    Answered by milladesignmaccom on May 11, 2016 at 03:20 AM

    ok, thank you.

  • Profile Image
    JotForm Support

    Answered by jonathan on May 11, 2016 at 03:32 AM

    Please check my cloned form https://www.jotform.com/61311252853953

    Some product items do not have image, so they differ in height. You can probably use a dummy image as filler for them so that they will still aligned to the other item.

    If my form setup is good already, we can apply the changes on your form as well.

    We will wait for your response.

     

     

  • Profile Image

    Answered by milladesignmaccom on May 11, 2016 at 03:39 AM

    I'm sorry but the images get compressed and look "no good", it would be better if the picture fra is fixed and the picture is filled within on the with, so if it higher then the fixed height it just gets cut of, if you get my meaning? The products that have no image, will have that very soon.

     

    But still it starts up very odd?

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 11, 2016 at 04:11 AM

    If I understand correctly, you want to display the frame of the image in a fixed width, so that the image within can be cut off instead of being compressed?

    I believe we can fulfill your requirement by adding a scroll bar in the frame. This way, the image will simply be cut off from the frame instead of being compressed. Furthermore, the user can scroll down the frame to see the rest of the image and make their selection.

    You can inject the css below to add a scroll bar to the frame.

    .form-product-item.hover-product-item {

        height: 187px!important;

        overflow-y: scroll;

        overflow-x: hidden;

    }

    To inject css, simply follow this guide: How To Inject Custom CSS

    Here's a cloned version of your form so you can see it in action: https://form.jotform.com/61311980184958 

    If you need further assistance, please let us know.

  • Profile Image

    Answered by milladesignmaccom on May 11, 2016 at 04:16 AM

    it looks tidy :) But the images is still "compressed", dragged or narrowed down to fit both the width and height, and that I can't present to the customer...

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 11, 2016 at 04:26 AM

    You can resolve the issue by also injecting the code below to your form:

    #cid_1 img.form-product-image-with-options {

        height: auto!important;

    }

    I have now updated the code on the demo form to reflect the changes when I added the additional code.

    https://form.jotform.com/61311980184958 

  • Profile Image

    Answered by milladesignmaccom on May 11, 2016 at 04:29 AM

    This look really nice! Thank you! Is it any way you can implement all of this in my form for me, so that I don't mess it up?

     

    Or should I just paste this in the bottom of the css:

    .form-product-item.hover-product-item {

        height: 187px!important;

        overflow-y: scroll;

        overflow-x: hidden;

    }

     

    #cid_1 img.form-product-image-with-options {

        height: auto!important;

    }

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 11, 2016 at 04:52 AM

    You are most welcome. :) For your convenience, I have now implemented the custom css code to your form. Please check on your end to confirm that the changes have been applied.

    https://form.jotformeu.com/60761421462349 

    Do let us know if you need further assistance.
    Cheers.

  • Profile Image

    Answered by milladesignmaccom on May 11, 2016 at 05:07 AM

    yes! thank you - everything looks fine :)