Weird format of Multiple Products list

I'm having trouble with formatting / look of my form. On my registration form, I have multiple products on offer.

There is a scroll box for the quantity choices on the multiple products which I do not want. See sample screenshot...

I cannot find a way to fix that formatting so there is a simple text box to the right of the product name. Can you advise or direct me to instructions?

Thanks in advance!

I have inspected your form, but I was not able to replicate mentioned issue. Scroll bar is not shown on my end.

Were you able to resolve your issue?

If the issue still persist on your end, please let us know which browser and device are you using. 

Sorry I am slow to answer... I did resolve the problem by widening the form width and aligning the label to TOP. Thanks.

I would still like to be able to make the option list more compact... by having the quantity beside the option. Is there any way to do that?

Hello,

I have cloned your form named "Virtual AWC Scholarship Run" on my side in order to test it.

You can replace the quantity option near the products by injecting additional CSS codes to the form as the following:

.form-sub-label{

vertical-align: inherit;

display: inline;

}

.form-sub-label-container{

margin-left: 160px;

margin-top: -26px;

float: left;

 }

.form-product-custom_quantity{

width: 55px;

 }

I hope this helps.

If you need further assistance, let us know.

Thank you.

Thanks so much, Candy. That did what I needed. HOWEVER, other parts of the form have gone all wonky now.

Next step??

Joette

Candy, I had to remove that CSS since it caused too many other formatting issues. See my screenshot.

I need to get this live asap, so I'll just live with the Quantity below the Product choices.

Dear @awcthailand,

Unfortunately, I couldn't find any other solutions, yet.

Please give me some time in order to investigate this problem further.

Thank you for your understanding.