Image Picker Widget: Centering the images

  • NgeeAnnPolytechnic
    Asked on March 16, 2015 at 7:04 AM
    2. How do i centralise the text & images when viewed on various screens?
  • Jan
    Replied on March 16, 2015 at 10:37 AM

    Hello,

    Unfortunately, this widget is placed inside the iFrame container which is why you can't apply custom css just by injecting it.

    In order to make the image to appear in the center, you can reduce the width of the form using the Form Designer tool. Under the Form Layout, put 550 on the form width. You also need to enable the "Make this form responsive" option.

    Image Picker Widget: Centering the images Image 1 Screenshot 30

    You also need to apply this custom CSS code for the text above the widget to appear at the center of the form. In the form designer, go to the CSS tab then paste this code.

    #label_1 {

        text-align: center !important;

        width: 100% !important;

    }

    Image Picker Widget: Centering the images Image 2 Screenshot 41

    Another way of injecting custom CSS: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here is a demo form. You can clone it if you like.

    Hope this helps. Let us know if you need any help.

    Thank you.