What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Product Items List on Order Form appear long in Firefox

    Asked by adamharvey on November 16, 2014 at 09:28 PM

    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

    Page URL:
    http://form.jotform.co/form/42657036903860

    order form product items JotForm form list style size
  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 17, 2014 at 06:10 AM

    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!

  • Profile Image

    Answered by adamharvey on November 19, 2014 at 02:59 PM

    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

  • Profile Image
    JotForm Support

    Answered by Mike_T on November 19, 2014 at 04:48 PM

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

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

    Thank you.

  • Profile Image

    Answered by adamharvey on November 19, 2014 at 05:12 PM

    Perfect. Thanks a lot!