Changing the look of one element.

  • blackhattranscribers
    Asked on February 9, 2021 at 3: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.

    Jotform Thread 2886514 Screenshot
  • Jed_C
    Replied on February 9, 2021 at 6: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.

  • blackhattranscribers
    Replied on February 10, 2021 at 2: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 Screenshot 10

    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.

  • Kiran Support Team Lead
    Replied on February 10, 2021 at 6: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!

  • blackhattranscribers
    Replied on February 11, 2021 at 2:01 PM

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