The form sometimes cuts the last product

I have one more issue. I dom't know why but the form sometimes cuts the
last product - please find attached file where it's presented.
How to resolve this problem?

Are you referring to the images in your product fields?

Since our forum does not accept attachments from email, we suggest uploading the image in your thread here https://www.jotform.com/answers/1117142 (use the image tool) so we can see problem you're referring.

Thank you!

By the way, I think I got what you mean. It's the options that are cut off.

The reason is due to the empty options which contain spaces which result to dropdown options with empty labels.

This is how some of your product options looks like in your form:

To fix it, remove the empty options in your product.

After:

If you need further assistance, let us know.

I'm reffering to this image - produkcts on the list are cutted that's why I must add empty spaces.

Hi,

Could you try using this custom CSS code instead:

/*Adjust height of span where image is and set the display to block*/

span.form-product-item {

    min-height: 45px !important;

    display: block;

}

/*Adjust the margin top of the table*/

table.form-product-child-table {

    margin-top: 15px !important;

}

To inject the custom CSS code on your form, you can follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

That should allow you to have the images and the product text to not cut off. Here's my cloned form so that you can see how it looks like when you implement that CSS: https://form.jotformpro.com/71011995020951. 

Note: Make sure to remove the extra products you added because this CSS code will adjust the height to not cut off the elements. 

Let us know if that works. 

Thank you so much - works and looks (almost :-) ) great now.

The last thing is that I want to ask you for CSS code which move some product categories to the edge of the form. 

Thank you in advance.

Append this:

.form-product-child-table {

    width: 93%;

}

If it does not give you the desired output, try changing it to 92%. So far, the 93% should give you the following.

Let us know if this doesn't help.

You might also want to add this to align the quantity headers to the right side.

Actually it doesn't work, nor desired output nor alignement.

Moreover, "item subtotal" text is still cropped.

Next one: some categories have text below the image and the others next to it (i prefer "next to" option).

.. and the last one - does this form is still RWD after using CSS code you provided to me?

 

Thank you

You may try the next CSS:

[data-type=control_payment] {

margin-right: 0;

padding-right: 0;

}

.form-product-item  {

width: 100%;

}

.form-product-item div:first-of-type {

width: 93%;

}

.form-product-child-table {

width: 100%;

}

.form-special-subtotal {

  height: 30px !important;

}

.form-product-child-table th:nth-of-type(2) {

text-align: right !important;

}

.form-product-child-table th:nth-of-type(3) {

text-align: center !important;

}

The layout will not be the same on the mobile devices but it should be still mobile friendly.

Thank you, looking and working perfect.

I have to admit that you have superb support! :-)

Greetings