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

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

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.

ok, thank you.

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.

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?

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.

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...

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 

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;

}

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.

yes! thank you - everything looks fine :)