Can't get image to left of submit button--only below or above it

  • Profile Image
    blampl
    Asked on November 07, 2012 at 04:45 PM

     

     

    While chatting with someone at JotForm I asked: “I have created a Submit Button and aligned it to the right. I want to put an image of an arrow pointing to the submit button's left. How do I do that?”

     He gave me the following code: #id_11 {width: 150px;top: 440px;position: absolute; left: 195px;} and sent me to http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes  I followed the instructions there.  While the arrow appears to the left, it remains below the horizontal box that the submit button is in. I want it in the same box to the left of the button.

     Any help would be appreciated.

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 05:03 PM

    Hi,

    If this is your form; http://www.jotform.us/form/23084514663150. Please inject this custom codes;

     

    #id_14 {

    width: 150px;

    top: 485px;

    position: absolute;

    left: 150px;

    }

     

    Guides On How To Inject Custom CSS Codes:

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

    I hope this helps. Thanks

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 05:26 PM

    I'm Sorry, I updated the codes above. My colleague codes was right, you just need some adjustments to make the buttons align well.

    Thanks

  • Profile Image
    blampl
    Answered on November 07, 2012 at 07:33 PM

    Yes, you identified my form. Do I just add the new code you gave me to the old one? Or does it replace the old on?

  • Profile Image
    jonathan
    Answered on November 07, 2012 at 07:45 PM

    @blampl

    The other existing CSS code must have its purpose. Please try not to remove them, you can just append/add the newer code proberly align the submit button.

    To append the code, just open Custom CSS box, click inside, (make sure all codes are not highlghted), press Enter key.. this will add space where you can now paste the new code.

    Please inform us if you require further assistance.

    Thanks.

  • Profile Image
    blampl
    Answered on November 07, 2012 at 08:23 PM

    Ok I've appended the new code to the Custome.CSS box. But I'm still not able to place the arrow in the same horizontal space to the left of the submit box. I've moved the arrow above the box now so you can see it. All I can do is move it up above or below the submit button--not directly to its left.

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 08:28 PM

    Hi,

    Please make sure to copy the codes above correctly. As I could see, you have miss to include the "{" sign and forgot to remove the other codes:

    Please remove the present injected codes and inject only this:

     

    #id_14 {

    width: 150px;

    top: 485px;

    position: absolute;

    left: 150px;

    }

    Please redo the button position. Make it under the submit button so the codes given will work.

    Thanks

  • Profile Image
    blampl
    Answered on November 07, 2012 at 08:49 PM
    Thanks. Do I need to worry about the blue highlight over your code. Or should I just copy and paste it as is?
  • Profile Image
    Welvin
    Answered on November 07, 2012 at 08:53 PM

    No Worries about that highlight effect. Just please copy and paste it to Edit CSS box. It is just a sort of legend to let you know the codes you need to inject.

    Thanks and Cheers!:)

  • Profile Image
    blampl
    Answered on November 07, 2012 at 10:12 PM

    The arrow still isn't moving up.

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 10:17 PM

    Your button looks good on my end;

    But your arrow image is so close to your submit button. You better change the button type from JPG to PNG.

    Thanks

  • Profile Image
    blampl
    Answered on November 07, 2012 at 10:52 PM

    I finally could see that it moved up after I refreshed the page. Then I changed it to PNG after Ii saw that you couldn't see the whole button. But the arrow wouldn't move up again. So I repasted the code.  Now it won't move up again. Do I need to wait? I tried refreshing, but that didn't help this time.

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 10:55 PM

    The field ID has been change. Please replace the injected codes to this;

     

    #id_15 {

    width: 150px;

    top: 500px;

    position: absolute;

    left: 150px;

    }

    Thanks

     

  • Profile Image
    blampl
    Answered on November 07, 2012 at 11:02 PM

    Done! Pasted the new code. It looks great now when I view it in the preview mode. But when I'm in the edit mode, the submit button appears below the arrow. Which do I believe?

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 11:06 PM

    Please disregard the EDIT mode view, that's how it works. For as long as you have the right codes, the live preview or view will be perfect.

    Thanks

  • Profile Image
    blampl
    Answered on November 07, 2012 at 11:14 PM

    Good to know. I'll remember that. Thanks for all your help. I really appreciate it!

  • Profile Image
    Welvin
    Answered on November 07, 2012 at 11:15 PM

    You are welcome. Please let us know if you need help, we are just here. Cheers! :)