Quantity Blocked by Arrows Due to Spacing Issue

Hi,

I have tried using the chat to get the answer to this by injecting custom ccs codes, but I am getting the same result. The quantity is being blocked by the arrows of the drop-down. Please advise.

Hi Jennifer,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Regarding the issue where the quantity is being blocked by the arrows of the drop-down, it seems like a CSS or layout conflict in your form. Here’s how you can address it:

How to inject custom CSS to widgets or form elements:

1. In Form Builder, select your widget or the problematic field.
2. Click on the Wand icon on the right side of the widget or field.
3. Go to the Custom CSS tab and paste your CSS code there.
4. Click Update to apply the changes.

Make sure your CSS code properly adjusts the spacing or padding around the quantity dropdown so that the arrows do not overlap or block the quantity number.

If you are using the Product List's Quantity Selector, note that the quantity starts at 1 and cannot be set to 0. If you want users to select 0 or skip the product, consider using the Inventory widget instead, which allows 0 as a valid choice.

If you want to customize the appearance of the product field, you can also use CSS to adjust sizes, colors, and spacing. For example, you can add padding or margin to the dropdown to prevent the arrows from overlapping the quantity.

For detailed instructions on injecting custom CSS, you can check the guide on How to Inject Custom CSS Codes.

Give it a try and let us know how it goes.

Hi Jennifer,

Our support team will take over from here to assist you further with this issue.

Reach out again if you need any other help.

Hi Jennifer,

To keep the quantity number from being blocked by the dropdown spinner, inject the CSS code below into your form’s style settings. Let me show you how:

    1. First, copy this code:

div.form-spinner-input-td .form-spinner-input {

  width: 87%;

  border: none;

  box-sizing: border-box;

  text-align: right;

  outline: none;

}

    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Take a look at the screencast of the result below:

Give it a try and let us know how it goes.

Thank you! That worked.
________________________________
...

Hi Jennifer Porto,

Your request has been answered and the thread is closed.

If you have another question or need more help, feel free to reply here and we'll assist you right away.