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

    Images in Image Picker widget are not properly aligned with long labels

    Asked by Sabahat_Haneef on February 26, 2017 at 12:36 AM

    Hi,

    I'm using image picker with 16 images and labels respectively. My labels are long so The images are not aligned. I tried taking help from previous queries but no use. Please help me fix my image picker widget so 4 images are shown on the screen and well aligned with long labels.

     

    Also please make it responsive so it's seen well on mobiles.

     

    Many thanks

     

    Page URL:
    https://form.jotform.me/70392971466465

  • Profile Image
    JotForm Support

    Answered by Welvin on February 26, 2017 at 06:59 AM

    I've fixed the alignment by injecting the following custom CSS codes in the widget configuration:

    .imageContainer {

          float: none;

    }

     

    The widget is already responsive. Do you want to adjust the image sizes to make two or three columns? If so, try adding the following custom CSS codes in the widget:

    @media only screen and (max-device-width: 550px) {

    .imageContainer {

        width: 50% !important;

        margin: 10px 0px !important;

    }

    }

     

    Let us know if you need further assistance.

  • Profile Image

    Answered by Sabahat_Haneef on February 26, 2017 at 11:03 AM

    Hi, thanks for solving the issue, but there is one more glitch. Please find attached image to see what I mean. (image link incase it's not attached here: https://www.dropbox.com/s/mhh74an3ihr9otq/Capture.PNG?dl=0 )

    images and labels are unequal, please help me fix them.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 26, 2017 at 11:45 AM

    Add the following custom CSS codes in the form:

    .imageContainer {

        display: inline-table !important;

    }

    Here's our guide on how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The output should be the layout that you desired.