"Show Total" on position

  • Profile Image
    beautifulcanvas
    Asked on September 01, 2013 at 08:04 PM

    is there a way to move "Total £0.00 GBP" to the bottom and center of product list (form example http://form.jotformeu.com/form/23526927539363 ) as if it were on a new line ?

  • Profile Image
    jonathan
    Answered on September 01, 2013 at 09:01 PM

    Hi,

    You can re-position the "Total" using CSS code like this

    .form-payment-total{position:relative;top:50px;}

    Try to adjust the "top" number according to your preference.

    I tried the 50px and the result is like this

     

    Thanks.

  • Profile Image
    abajan
    Answered on September 01, 2013 at 10:54 PM

    @beautifulcanvas

    If you wish the "Total" element to be centered below both columns of products, like in this clone, add the following rules to your originally injected CSS:

    .form-payment-total {
    position: relative;
    width: 200px;
    top: 100px;
    left: -100px;
    }

    .form-product-item:hover,
    .form-line-active
    .form-payment-total,
    .form-line-error
    .form-payment-total {
    color: #FFF;
    }

    #id_8, #id_9 {
    margin-top: 70px;
    }

    You'll also notice that the highlighting on focused inputs has been disabled in the clone:


    This prevents the product names from vanishing when they are hovered over and the payment field has the focus.

  • Profile Image
    beautifulcanvas
    Answered on September 02, 2013 at 04:35 AM

    thank you all done,

  • Profile Image
    gori-mathew
    Answered on September 02, 2013 at 05:05 AM

    You are welcome, do let us know if you need further assistance.

    Regards.