Form Collapse--please help with my custom arrow icon

  • Profile Image
    clarkschool
    Asked on February 26, 2016 at 11:48 AM

    Hi there,

    I am trying to use a custom arrow for the form collapse fields in my document.

    This is the arrow I'd like to use: http://vignette3.wikia.nocookie.net/4craft/images/1/1b/Left_Arrow_Red.png/revision/latest?cb=20140805210825

    But I can't figure out the correct CSS to be able to show the whole arrow--it keeps justifying left.

    Thanks for your help!

  • Profile Image
    BJoanna
    Answered on February 26, 2016 at 01:24 PM

    Is this what you wanted to achieve? 

     

    To achieve this I have downloaded your image to my computer. Then I have used Microsoft Office Picture Manager and I have re-sized your image. Then I have uploaded re-sized image to my form. 

    I have also added this CSS code to position image:

    .form-collapse-right-hide {

        padding-left : 15px;

    }

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

    This is URL of my re-sized image https://files.jotform.com/jufs/BJoanna/form_files/Arrowimage.png 

    Here is my cloned form: https://form.jotform.com/60564794100958 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    clarkschool
    Answered on February 26, 2016 at 01:28 PM

    Excellent help--thank you! Really appreciate you going above and beyond.

  • Profile Image
    clarkschool
    Answered on February 26, 2016 at 01:35 PM

    So that I may do this myself in the future:

    1. What are the percentage/pixel amounts that you used to resize the image?

    2. Are you using a specific tool to create a URL for an image saved locally? I've tried to used the URL created from saving in my Google docs, but that doesn't seem to work (it's as if Jotform does not like to or can't reach into GDocs and retrieve the image, or GDocs won't allow access).

  • Profile Image
    BJoanna
    Answered on February 26, 2016 at 02:01 PM

    When I re-sized image I have set size of image to be 60 x 53 px

    Then I have uploaded image form my computer to JotForm. I used image field and I selected Upload Image File option. 

    Then I have chose image from my folder and uploaded image.

    Then I have copied Image Source.

    Finally I have pasted image source to Form Designer, instead of URL of previous image.

    Also thank you for your kind words. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    clarkschool
    Answered on February 26, 2016 at 02:22 PM

    Ah ha! A new trick! Thank you!

  • Profile Image
    BJoanna
    Answered on February 26, 2016 at 03:05 PM

    You're welcome :)

    Feel free to contact us if you have any other questions. 

  • Profile Image
    clarkschool
    Answered on February 29, 2016 at 11:06 AM

    Hi again, what would I enter for code if I wanted the arrow's background to be transparent? It is currently white on gray, which I not what I'd like.

    Thank you!

     

    ETA: Nevermind--I figured out how to copy the one you linked to, so I was able to make it transparent in that way...

  • Profile Image
    BJoanna
    Answered on February 29, 2016 at 11:59 AM

    Unfortunately it is not possible to make background of image transparent. Your original image that I used was transparent. I would suggest you to resize your original image and then add resized transparent image to your form. 

    You can also clone my form to your account and then use your cloned form. Inside of this guide you can find how to clone form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if you need further assistance.