How can I swap the positions of quantity and price on form?

  • Profile Image
    carterceo
    Asked on June 18, 2013 at 01:15 PM

    I would like to have the price below the name of the product and have the quantity located where the price is now.  When I add the quantity option the form becomes too long.  

  • Profile Image
    pinoytech
    Answered on June 18, 2013 at 02:51 PM

    Hi,

    Can you please take a look at this cloned form if this is what you wan to achieved?

    http://www.jotformpro.com/form/31685902468968

    If yes, inject his custom css into your form.

    /*---PRODUCTS---*/

    #input_7_quantity_1004_0.form-textbox {

    position: absolute;

    margin-left: 130px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1004_0"] {

    position: absolute;

    margin-left: 176px !important;

    margin-top: -41px !important;

    }

    #input_7_quantity_1005_0.form-textbox {

    position: absolute;

    margin-left: 157px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1005_0"] {

    position: absolute;

    margin-left: 203px !important;

    margin-top: -41px !important;

    }

    .form-product-details {

    position: absolute;

    margin-top: 24px !important;

    margin-left: -90px !important;

    font-size: 12px !important;

    }

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image
    carterceo
    Answered on June 18, 2013 at 02:57 PM

    This is perfect!

     

    Thank You!  Best support ever from a service!

     

    Tim Carter

    printmypano.com

  • Profile Image
    pinoytech
    Answered on June 18, 2013 at 03:13 PM

    It's my pleasure! If you need our assistance again, feel free to contact us at anytime.

    Have a nice day!

  • Profile Image
    carterceo
    Answered on June 18, 2013 at 05:14 PM

    One more question?

    Boss would like the prices to be both right or left aligned, not right and left.  Is it possible to control the position of $146.95 USD so that is left aligned?

  • Profile Image
    jonathan
    Answered on June 18, 2013 at 07:31 PM

    Hi Tim,

    My colleague will get back to you with a CSS code solution on this once he's back online.

    I will also try to come up with one. We will notify you.

    Please stay tuned.

    Thanks.

  • Profile Image
    pinoytech
    Answered on June 19, 2013 at 10:55 AM

    @carterceo

    Sorry to keep you waiting. I have now updated the codes that I use to this:

    /*---PRODUCTS---*/

    #input_7_quantity_1004_0.form-textbox {

    position: absolute;

    margin-left: 157px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1004_0"] {

    position: absolute;

    margin-left: 203px !important;

    margin-top: -41px !important;

    }

    #input_7_quantity_1005_0.form-textbox {

    position: absolute;

    margin-left: 157px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1005_0"] {

    position: absolute;

    margin-left: 203px !important;

    margin-top: -41px !important;

    }

    label span.form-product-details b{

    position: absolute;

    margin-top: 24px !important;

    margin-left: -90px !important;

    font-size: 12px !important;

    left: 115px;

    }

    This is how it looks like now: http://www.jotformpro.com/form/31685902468968

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 04:53 AM

    Hi,

     

    Also need some help on this custom code:

    I currently have this:

     

    http://www.jotform.com//?formID=32034807832855

     

    I need to make it so that the price is displayed below the "Taster" Part and the "guests" is shown below the drop down box. Can this be done?

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 05:05 AM

    Hi,

    Do you want it to be like this?

    If yes, removed all the existing CSS codes injected to that specific form and inject this instead:

    .form-product-item{

    width: 258px;

    height: 59px;

    }

     

    .form-product-details{

    position: relative;

    top: 26px;

    left: 115px;

    }

    However, if you want it below the dropdown box, replace the 2nd CSS codes to this:

    .form-product-details{

    position: relative;

    top: 44px;

    left: -58px;

    }

    You can play around with the top and left value in this CSS codes to position the price text.

    Thanks!

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 05:14 AM

    @CoverStarExperiences

    I have made corrections. Kindly check the right thread here: http://www.jotform.me/answers/248356