Changing the look of one element.

  • Profile Image
    blackhattranscribers
    Asked on February 09, 2021 at 03:25 PM

    Hi, how can I change the paypal total element at the bottom of my form to look like the elements highlighted in red on the screenshot, i.e. with the heading to the left and the information field to the right of that.

    Screenshot
  • Profile Image
    Jed_C
    Answered on February 09, 2021 at 06:47 PM

    Please try adding this CSS into form

    #id_33 {
      display: flex;
    }
    div#cid_33 {
      margin-left: 16%;
      margin-right: 15%;
    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if that helps.

  • Profile Image
    blackhattranscribers
    Answered on February 10, 2021 at 02:12 PM

    Thank you very much, it at least pointed me in the right direction as I don't know CSS very well and don't know which properties to look for.

    See attached screenshot of what it looks like after me playing a little with the code snippet you gave, it ended up like this:

    1612984262_60242fc684277_Screenshot.png

    And the code:

    #input_33_donation {
       display : flex;
    }

    div#cid_33 {
       margin-left : 31%;
       margin-right : 15%;
       margin-top : -3%;
    }


    I only have one issue remaining in that I want the USD to either move to the right of the value box, or disappear completely, and a $ sign on the left of the value box.

  • Profile Image
    Kiran
    Answered on February 10, 2021 at 06:21 PM

    Please add the following CSS code to the form to display the USD on the right side of the text box.

    #cid_33 .form-sub-label-container {

    display: flex !important;

    }

    Thanks!

  • Profile Image
    blackhattranscribers
    Answered on February 11, 2021 at 02:01 PM

    Thank you, that mostly did the trick, figured the rest out as well.