Custom CSS: How to put quantity to the same line as product?

  • hpaschenko
    Asked on June 9, 2021 at 12:47 PM

    In the How often box, I would like to move the 'unlimited number of payments' in the sam line as the selection above, or at least move it up closer. Maybe even separator line inb etween selections....Thanks in advance

  • Laura JotForm Support
    Replied on June 9, 2021 at 6:52 PM

    Hi,

    Please use the following CSS code to set the quantity to the same line:

    .form-product-item {
    width: 600px !important;
    }
    .form-product-item br {
    display: none;
    }
    .form-product-item .form-sub-label-container {
    width: 250px !important;
    margin-top: -25px !important;
    margin-right: -55px !important;
    float: right;
    }


    Here is how to add the code to your form:
    How-to-inject-custom-css-codes

    I'm afraid that it's not possible to add separator lines to the product fields. Currently, it's possible to add dividers only between elements.

    Let us know if you need further assistance.

  • hpaschenko
    Replied on June 10, 2021 at 4:41 PM

    Thank you, That worked great!!!!

    but now, how can I align the " (price box) USD....." so that it is in line with others


  • Laura JotForm Support
    Replied on June 10, 2021 at 6:23 PM

    Hi,

    Happy to hear that!

    Please try inserting the following code to aling the prices:

    #input_54_1003_custom_price, #input_54_1000_custom_price{
     margin-left: 10px !important;
    }
    #input_54_1002_custom_price{
     margin-left: 28px !important;
    }


    This should make the prices look something like this:

    1623363789 60c290cdb14ea howoften Screenshot 10

    Let us know how it goes.

  • hpaschenko
    Replied on June 10, 2021 at 11:37 PM

    Thank you...worked, but... one more thing. The parenthesis "(" do not line up.

    Could we either line them up of get rid of both "(" and ")"

  • Ashwin JotForm Support
    Replied on June 11, 2021 at 6:33 AM

    I am not sure if I have understood your question correctly. Do you mean to say that you want "(" of all products to be aligned one below the other in one line?

    Please let us know, and we will see if it is possible.

    We will wait for your response.

  • hpaschenko
    Replied on June 11, 2021 at 8:43 AM

    Yes, I would like the "(" of all products to be aligned one below the other, they do not look professional. could the "(" be positioned? right before the amount box?

    1623415259 60c359db7ccc9  Screenshot 10

  • Michal_S Jotform Support
    Replied on June 11, 2021 at 10:04 AM

    Hello!

    To achieve the desired effect:

    • Remove the code (sorry, Linda!) from your custom CSS:

    #input_54_1003_custom_price, #input_54_1000_custom_price {

      margin-left : 13px !important;

    }

    #input_54_1002_custom_price {

      margin-left : 23px !important;

    }

    #input_54_1000_custom_price {

      margin-left : 8px !important;

    }


    • Insert this CSS code into your form's Custom CSS:


    [for=input_54_1003] .form-product-details

    {

     margin-left:14px!important;

    }

    [for=input_54_1000] .form-product-details

    {

     margin-left:9px!important;

    }

    [for=input_54_1001] .form-product-details

    {

     margin-left:6px!important;

    }

    [for=input_54_1002] .form-product-details{

     margin-left: 27px!important;

    }


    This won't look right in the form builder, but it looks right on the live form:

    131928 1 Screenshot 10

    Please let us know if you require any further assistance.

    Thank you!


  • hpaschenko
    Replied on June 11, 2021 at 1:06 PM

    Works great on lap top Thank you!!

    but on phone (see below) , the amount box is way too big. Could you help me again?

    1623431166 60c397fe11cac  Screenshot 10

  • Taylor JotForm Support
    Replied on June 11, 2021 at 5:11 PM

    Hello! 👋

    It took a bit of testing but I believe this should resolve your display issue on mobile. Just paste this bit at the end of your custom CSS that you already have on the form.

    @media only screen and (max-width: 480px) { 
        [for=input_54_1004] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1003] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1002] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1001] .form-product-details {
            font-size: .4em;
        }
        [for=input_54_1000] .form-product-details {
            font-size: .4em;
        }
        #product-name-input_54_1004{
            font-size: .4em;
        }
        #input_54_1004_custom_price {
            width: 5%;
        }
        #product-name-input_54_1003{
            font-size: .4em;
        }
        #input_54_1003_custom_price {
            width: 5%;
        }
        #product-name-input_54_1002{
            font-size: .4em;
        }
        #input_54_1002_custom_price {
            width: 5%;
        }
        #product-name-input_54_1001{
            font-size: .4em;
        }
        #input_54_1001_custom_price {
            width: 5%;
        }
        #product-name-input_54_1000{
            font-size: .4em;
        }
        #input_54_1000_custom_price {
            width: 5%;
        }
        .form-product-item .form-sub-label-container {
          margin-right : 230px !important;
          margin-top: 10px!important;
    }
    }

    It should look like this on mobile devices.

    1623445806 60c3d12e4ac98  Screenshot 10

    Feel free to adjust the spacing and font sizes as needed, was just trying to get the layout in the form's payment field in an effective way. I hope this helps! If you need any additional help, please let us know!

    Thanks!

  • hpaschenko
    Replied on June 12, 2021 at 8:09 AM

    Thank you!!!! All good now!