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

  • KarFre
    Asked on March 30, 2015 at 1: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:

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

    This is what I end up with:

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

  • Ben
    Replied on March 30, 2015 at 2: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.

  • KarFre
    Replied on March 30, 2015 at 3:51 PM

    Works perfectly, thanks!

  • Ben
    Replied on March 30, 2015 at 3: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.

  • KarFre
    Replied on April 1, 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?
  • Ben
    Replied on April 1, 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.