Product Items List on Order Form appear long in Firefox

Hi there,

I am having trouble getting a large order form to appear in Firefox as it does in Chrome. Using the forum I added the following code to condense the Product Items list on the order form by allowing the Quantity button to appear to directly to the right of each item rather than on a separate line:

.form-product-item {width: 600px !important;}.form-product-item br {display: none;}.form-product-item .form-sub-label-container {width: 100px !important;float: right;}

This additional code worked exactly how I wanted it to in Safari and Chrome when I embedded the code onto my web page. However on Firefox the Order Form list looks very long like it appears when this code isn't in use. I need the list to appear more condensed on all the browsers as the page is very long as it is to allow it to fit.

I have tried using iframe as an embedding option as well but the result is exactly the same on Firefox except locked in an iframe. 

Is there any additional code that I inject for the Firefox version of the form to behave like it does on the other browsers?

Below are a couple of screenshots with how it looks on Safari and then Firefox.

Any help would be very much appreciated.

Cheers,
AJ

Hello AJ,

Please use the following custom css code in your form and see if that solves your problem: 

.form-product-item {width: 650px !important;}

.form-product-item br {display: none;}

.form-product-item .form-sub-label-container {width: 70px !important;float: right; margin-top: -5px !important;}

Hope this helps.

Do get back to us if the issue persists.

Thank you!

Hi Ashwin,

Thanks very much for your reply. 

The code made things compact very nicely both in the Jotform interface and Safari/Chrome but the same problem still remains on Firefox. That being that breaks between the products are still there and this makes the products list almost twice as long as it appears in the other browsers.

Are then any other things I can try in terms of coding and things? I'd really love for this to work as it looks perfect in the other browsers.

Any further help would be awesome!

Cheers,
Adam

Please also add the following CSS to fix the extra space issue in Firefox.

.form-product-item {
white-space: normal;
}

Thank you.

Perfect. Thanks a lot!