Edit Text URL image will not constrain to dimensions

  • Profile Image
    torreszach
    Asked 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
    Jim_R
    Answered 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
    torreszach
    Answered 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
    torreszach
    Answered 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
    Jim_R
    Answered 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!