What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Edit Text URL image will not constrain to dimensions

    Asked by torreszach on December 26, 2016 at 07:58 PM

    Hello,

    On my form I am creating a two row table inside of a "edit text" field. Then I am using an image in row 1 and text in the second.

    My problem is whenever I try to constrain the image dimensions to something smaller, it ignore them and goes with the default image size that is obnoxiously big.

    Form Link:
    https://www.jotform.us/form/63546904858166?preview=true

    Image Link:
    http://i.imgur.com/oLGz09z.jpg

    Image Source Link:
    https://torreszach.imgur.com/all/


    Please help.


    Thanks,

    Zach

  • Profile Image
    JotForm Support

    Answered by Jim_R on December 26, 2016 at 08:31 PM

    Hey Zach, I'm seeing you're using the width and height attributes of the img tag for the table you inserted on the Text Field.

    Try using inline CSS instead to adjust the width and height of the image.

    From this:

    <table>

    <tbody>

    <tr>

    <td><img class="hoverZoomLink" width="100" height="100" src="//i.imgur.com/oLGz09z.jpg" alt="checkmark" /></td>

    <td>test&nbsp;</td>

    </tr>

    </tbody>

    </table>

    Change it to:

    <table>

    <tbody>

    <tr>

    <td><img class="hoverZoomLink" style="width: 100px; height: 100px;" src="//i.imgur.com/oLGz09z.jpg" alt="checkmark" /></td>

    <td>test&nbsp;</td>

    </tr>

    </tbody>

    </table>

    (NOTE: Delete the section highlighted in yellow and replace it with the ones highlighted in green)

    RESULT:

  • Profile Image

    Answered by torreszach on December 26, 2016 at 08:58 PM

    Hey Jim,

    Thanks for the quick response! Unfortunately I never found a snippet of code similar to the one you posted so this is what I tried.

    Here's a snippet of my html: 
    (found by clicking HTML in the editing header while "text" was highlighted)

    <table>

    <tbody>

    <tr>

    <td><img class="hoverZoomLink" src="//i.imgur.com/oLGz09z.jpg" alt="checkmark" width="100px" height="100px"></td>

    <td>test </td>

    </tr>

    </tbody>

     

    </table>

     

    What I tried:
    1. went to the css designer and highlighted my image but I could not figure out how to edit the inline css
    2. changed the image dimensions in the "text"'s html code


    Thanks,

    Zach

  • Profile Image

    Answered by torreszach on December 26, 2016 at 09:01 PM

    Hey Jim,

    I went ahead and pasted your inline css code into the html box and it fixed it instantly. Sorry about that!


    Thanks again,

    Zach

  • Profile Image
    JotForm Support

    Answered by Jim_R on December 26, 2016 at 09:13 PM

    Nah, no need to be sorry. I'm glad you figured that out and thank you for keeping us posted.

    Happy Holidays!