How can I add an Image next to Text in the same row?

  • Profile Image
    KarFre
    Asked on March 30, 2015 at 01:19 PM

    I see that you can add an image when editing a text field but the placement of the image is very limited and it doesn't seem to "stick" when I get it to look like I want.  This is what I want it to look like:

    This is what I end up with:

  • Profile Image
    Ben
    Answered on March 30, 2015 at 02:59 PM

    I wanted to suggest using an image field and Text field and apply Shrink option to both, but it seems that you already did this.

    Now to get it in the same row all we need to do is change the width of the Text element and we can do it like so:

    #id_3 {
        width: 65%;
    }

    Once you add this to your jotform injected CSS field, you will see it in the same row.

    You can see here how to do that: Inject Custom CSS Codes

    Now we would be happy to assist you position it just right, but I have noticed that the text is not as on the screenshot above, so I would suggest adding all the text that you want in the Text element and then let us know and we would be happy to provide you with the CSS that aligns the text to the bottom of the image, or at its top - while in the same line.

  • Profile Image
    KarFre
    Answered on March 30, 2015 at 03:51 PM

    Works perfectly, thanks!

  • Profile Image
    Ben
    Answered on March 30, 2015 at 03:54 PM

    Great to hear that :)

    Do let us know if you have any further questions or need our assistance and we would be happy to assist.

  • Profile Image
    KarFre
    Answered on April 01, 2015 at 11:14 AM

    I have the same issue on many other forms in my library.  How do I find the Text element id# for the fields I would like to shrink?
  • Profile Image
    Ben
    Answered on April 01, 2015 at 12:21 PM

    Since this is a different issue, I have moved your question to a new thread here: http://www.jotform.com/answers/544798 where we will answer your question shortly.