What is the HTML or CSS inject for text layout around an image?

  • HAPEN
    Asked on May 3, 2015 at 12:06 PM

    I have added a text box and using HTML editor added an image. Currently, working on the form, I have additional images to add and would like to know how to change the image/text layouts.

    1.  Have text below image.

    2.  Have text right aligned to the image.

    3.  Have text left aligned to the image.

    4.  Have text wrap around the image.

     

    I know there is HTML code to this, but when I add it using the textbox editor, it does not work.  Maybe I am missing something?

    Below is an example.  I would like the paragraph to be below the image with image and text left aligned.

     

    What is the HTML or CSS inject for text layout around an image? Image 1 Screenshot 20

     

    I did the same the same with the top image on the form by adding breaks for a WYSIWYG approach, but I know this is not correct.

    Thanks,

     

  • Mike_G JotForm Support
    Replied on May 3, 2015 at 1:40 PM

    In order for you to accomplish this, you need to add some CSS codes to you Inject Custom CSS field under Preferences toolbar, Form Styles tab, of the Form Builder. 

    What is the HTML or CSS inject for text layout around an image? Image 1 Screenshot 30

    This is the code that you need to add: 

    #text_12 p:nth-child(2) {

    position:relative;

    float: left;

    }

    .form-all {

    height:1300px !important;

    }

    Click this to open the form I have edited already after cloning your form. You may also copy the Form URL so you could clone it.

    What is the HTML or CSS inject for text layout around an image? Image 2 Screenshot 41

    Here are the guides that might help you in following the instructions above.

    How-to-Inject-Custom-CSS-Codes

    How-to-clone-an-existing-form-from-a-URL

    If you have any question about the instructions above, please feel free to get back to us. Thank you.

  • HAPEN
    Replied on May 3, 2015 at 2:29 PM

    Thanks Mike. I appreciate the response.

    At first it looked like the issue was resolved.  However, I thought it worked, but when viewing on different devices, there were inconsistent views.  Both in design and edit mode the bottom section was either not visible or exceeded the border.   I took out the CSS inject and added breaks.