Overlapping fields on my form.

Hello,

I need some help with the overlapping fields on my form.

a. PDF Embedded Widget - Works great on mobile but not on browser.

b. Purchase Order Field - every field overlaps.

c. Text Box Field - too small.

Please see attached screenshot.

Thanks!

a. PDF Embedded Widget - Works great on mobile but not on browser.

Then, change the width of the widget from 600 to 578.

After that, add the following CSS below codes to your form.

li#id_89 {

    padding-left: 36px !important;

    padding-right: 36px !important;

}

It should look like this after:

b. Purchase Order Field - every field overlaps.

Try adding the CSS codes below to your form then check the result and see if that is what you would like to happen.

[data-type="control_payment"] .form-sub-label-container .form-dropdown {

    width: initial !important;

}

.form-sub-label-container{

    white-space: normal !important;

}

If not, please let us know and give us more details then we'll try our best to make the adjustments for you.

It should look like this after you add the CSS codes above.

c. Text Box Field - too small.

To adjust the height of the "Order Details" textarea field, you may add the CSS codes below.

textarea#input_61 {

    height: 100px !important;

}

It should look like this after you add the CSS codes above.

Hello Mike_G,

Everything worked out well. However, I would like the labels "Quantity", "Size" and "Type" to be on the left side of the field.

Also, is there any other widget that I could use to customize my product list aside from the Purchase Order?

Thanks.

Additional overlapping field issue in mobile. I am trying to match the field widths to 335.

Also, if the form will be viewed in mobile, the labels should still be aligned left—not indented.

I would like the labels "Quantity", "Size" and "Type" to be on the left side of the field.

Please try to add the CSS codes below and see if that satisfy your requirement.

.form-product-custom_quantity {

    width: 100px !important;

    direction: ltr !important;

}

.form-product-item .form-dropdown {

    direction: ltr !important;

}

span.form-product-item > span {

    direction: rtl !important;

}

Also, is there any other widget that I could use to customize my product list aside from the Purchase Order?

I would like to apologize for any inconvenience, but I'm afraid I don't fully understand what you mean here. Can you help us by explaining to us your concern in more details, please? 

However, you can use normal fields to list your products and then, you can pass the calculation to a payment field. Here's a guide that will help you better understand how it's done: How-to-Pass-a-Calculation-to-a-Payment-Field

With regards to your new concerns, please allow me some time to work on it and I will get back to you as soon as possible.

Thank you.

Hello Mike_G,

That worked out perfectly. I hope you could also look into the inquiry with regards to overlapping issue I posted above before your answer.

Thanks.

Oops, sorry I wasn't able to read the latter part of your reply. Sure, I will wait for your response again.

Although I have another question on how to fix the checkbox below.

I would like it if it would be on the left side of the item names (e.g. Business Card).

Is it also possible if the amount (0.00 PHP) will have a padding-left of at least 30px.

Lastly, is it possible if the fields would be in a column format instead of a row format?

Thanks Mike_G! You're the greatest!

Additional overlapping field issue in mobile. I am trying to match the field widths to 335.

Also, if the form will be viewed in mobile, the labels should still be aligned left—not indented.

I have checked your form using my android phone as well and I see what you mean regarding the overlapping input fields. However, it seems that the issue with the labels being indented are already fixed. Are you seeing the same as what I'm seeing that's shown in the image below?

To fix the issue with the fields that are overlapping, please delete the CSS code below that you injected in your form.

#first_4, #last_4 {

    width: 180px;

}

There are atleast thirty (30) of it in your form.

I would like it if it would be on the left side of the item names (e.g. Business Card).

Please add the following CSS codes below to move the checkboxes on the left side of the item names.

.form-product-item .form-checkbox{

    width: initial !important;

}

Is it also possible if the amount (0.00 PHP) will have a padding-left of at least 30px.

Yes, it is. Please add the codes below to achieve such.

span[id*='input_96_10'][id$='_price']{

padding-left: 30px !important;

}

Lastly, is it possible if the fields would be in a column format instead of a row format?

Does this mean that the fields for "Size" and "Type" will go below the "Quantity" field? May we also know how many columns do you intend to have for your product items? Please give us more details on how would you like for it to look like and we will try our best to give you the best possible workaround for it.

With regards to the current Payment Field I'm using, which is the "Purchase Order", it only lets me add 1 option with a special pricing in it. But in my form, I need to add 2 more option which will also enable me to add a special pricing to it.

Considering that this is already a different concern, I have moved it to a new thread which you can follow by clicking this link. We believe that we will be able to assist you better  if there will be a separate thread for every question/concern you have and, also, to avoid confusion with the answers being provided and/or follow-up questions that you may have.

I have checked your form using my android phone as well and I see what you mean regarding the overlapping input fields. However, it seems that the issue with the labels being indented are already fixed. Are you seeing the same as what I'm seeing that's shown in the image below?

- Yes, I think, I have fixed this yesterday.

Does this mean that the fields for "Size" and "Type" will go below the "Quantity" field? May we also know how many columns do you intend to have for your product items? Please give us more details on how would you like for it to look like and we will try our best to give you the best possible workaround for it.

-

Considering that this is already a different concern, I have moved it to a new thread which you can follow by clicking this link. We believe that we will be able to assist you better  if there will be a separate thread for every question/concern you have and, also, to avoid confusion with the answers being provided and/or follow-up questions that you may have.

- Thank you! I will reply to that new thread.

-------------------------------------------------------------------------------------------------------------------------------------------

Thank you for all your help.

This thread seems to be quite long. To avoid any confusion, I have moved your two latest concerns to new separate threads. We shall answer your questions there. Simply follow the links below: 

https://www.jotform.com/answers/942568 

https://www.jotform.com/answers/942570 

Thank you.