Placing product quantity on the same line with product name

  • Profile Image
    erikagibson
    Asked on June 23, 2017 at 04:43 PM

    How to customize the square widget/app design?

    Trying to make an efficient wholesale order form - how to customize square widget/app design?

    In particular, on the second page, I'm trying to make everything thin and on one line. There will be loooots of items eventually, so I don't want it to be too long.

  • Profile Image
    Mike
    Answered on June 23, 2017 at 05:54 PM

    The payment field layout is not customizable unless you use some custom CSS to adjust the styles.

    You may try adding the next CSS to reduce the space between the products.

    .form-product-item {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 3px;
    }

    If you need any further assistance, please let us know.

  • Profile Image
    erikagibson
    Answered on June 23, 2017 at 06:06 PM

    That's one thing, definitely, that would help.If I shorten the name, is there a way to put the 'quanity' and the drop down on the same line instead of below it?

  • Profile Image
    Mike
    Answered on June 23, 2017 at 06:48 PM

    You may try the next CSS:

    .form-product-item {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 0;
    margin-bottom: 3px;
    }
    .form-product-item br {
    display: none;
    }
    .form-product-item .form-sub-label-container {
    float: right;
    margin: 0 !important;
    padding: 0 !important;
    }
    .form-product-item .form-dropdown {
    height: inherit;
    }
    .form-product-item .form-textbox {
    padding: 2px;
    }
    .form-product-custom_quantity {
    max-width: 42px;
    }

    You may also need to increase the form width to get this working.

    Thank you.

  • Profile Image
    erikagibson
    Answered on June 23, 2017 at 07:27 PM

    Perfect - thanks!