Problem with form CSS.

  • BBC2016
    Asked on January 30, 2017 at 6:33 PM

    Your codes made more problems than i had before! Please help immeditaly if possible!!!!!


    I need the box to be flush and aligned RH - it is STILL cut off. See image below. Marked in red.


    There is alot of space between the the last product option and the total section in blue. Can we pull that up a little bit or something??? See image below marked in red.


    The other most important thing is, when someone clicks BENEFACTOR option - they must enter an amount...but you cant click on the box to enter an amount!!!!!!!!!


    I cant get anything to work with the codes your sending. Please can u show me a preview before I go crazy with all this????

    Jotform Thread 1051071 Screenshot
  • Chriistian Jotform Support
    Replied on January 30, 2017 at 9:31 PM

    There seems to be several errors on the css of the form, which may be why the codes provided were not working for you. To resolve this, please open the Advanced Designer and find the braces } on the lines 960, 962, and 964. Remove these braces to fix the errors.

    Problem with form CSS Screenshot 30

    Now to adjust the fields based on your requirement, please find the section of the code on your form similar to the one below and update it with the one below. I have highlighted the changes I made in yellow.

    label[for="input_13_1006"] + br + br + span.form-sub-label-container {

        margin: 0 65px 0 0 !important;

    }

    Find this section and replace the margin with the highlighted code below to adjust the Total.

    .form-payment-total {

        max-width: 100%;

        text-align: right;

        margin-top: -50px;

        color: #1777B4;

    }

    Find and replace the "width" section of the code with the one highlighted below.

    #cid_13 span.form-product-item:nth-child(12) {

        position: relative;

        top: -40px;

        left: 20px;

        width: 70%;

    }

    If you are unable to find these in the advanced designer, then you can place the codes at the very bottom of the code so that they will override the previous ones.

    Here's the result:

    Problem with form CSS Screenshot 41

    You can also clone my demo form here: https://www.jotform.com/70298579096978 

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

  • BBC2016
    Replied on January 31, 2017 at 7:15 PM

    its supposed to look like this attached image i made in paint program. see attached and provide demo form clone please???????

     

     

     

     

     

    Problem with form CSS Screenshot 20

  • Chriistian Jotform Support
    Replied on January 31, 2017 at 8:37 PM

    The one on your latest screenshot seems to be for a different form. I also noticed that you have already posted a thread regarding this issue. To avoid any confusion, we will answer your concern on the thread that you posted here: https://www.jotform.com/answers/1052549 

    Thank you.