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

    How to change the size of the images in ddslick dropdown widget?

    Asked by Tankeroni on June 27, 2016 at 01:50 PM
    I notice the images used with this widget automatically get made the same default size.  Is there a way to change that for an image?  I don't see an intuitive way so I am hoping I can modify the img src line somehow.  Thanks in advance.
    ddslick dropdown image size
  • Profile Image
    JotForm Support

    Answered by Kiran on June 27, 2016 at 02:04 PM

    I understand that you want to change the size of the images in ddslick dropdown widget so that they are not displayed with the default size. If so, you may inject the following CSS code to the Custom CSS section of the widget.

    .dd-option-image {

    width: 50px;

    height: auto;

    }

    You may change the width value as per your requirement. Hope this information helps!

  • Profile Image

    Answered by Tankeroni on June 27, 2016 at 02:44 PM

    Hi, this only seems to work AFTER the selection is made, but I was referring to the size of all the images displayed when the menu is open and the user can see all the choices.

  • Profile Image
    JotForm Support

    Answered by Kiran on June 27, 2016 at 03:13 PM

    I'm not sure if I understand your query correctly. Do you mean to show all the images in the dropdown or display the resized images in the dropdown?

    I notice that the image class is change after the option is selected which is why the earlier code is displaying the images resized in the dropdown, but not when selected. Please change the CSS code to the following code:

    .dd-option-image, .dd-selected-image {

    width: 50px;

    height: auto;

    }

    Hope this information helps! If you are referring to something different, please let us know. We will be happy to assist.

     

  • Profile Image

    Answered by Tankeroni on June 27, 2016 at 03:37 PM

    I can't seem to effect a real change in the displayed images when the dropdown is selected and used. I made a much larger image - 150 width x 84 height and it will not show.  I know the image is that size because if I right click view image and see it, it is the much larger one.   But it still shrinks it down no matter what I do.  I tried saving, previewing, etc.

    None of the choices below work.  I tried them all separately several times each.

     

    .dd-option-image, .dd-selected-image {

    width: 150px;

    height: auto;

    }

     

     

     

    .dd-option-image, .dd-selected-image {

    width: 150px;

    height: 84;

    }

     

     

     

    .dd-option-image {

    width: 150px;

    height: auto;

    }

     

     

     

     

    .dd-option-image {

    width: 150px;

    height: 84;

    }

  • Profile Image
    JotForm Support

    Answered by jonathan on June 27, 2016 at 04:50 PM

    I assume this was the form https://www.jotform.us/form/61780609892164

    There was a max-width rule that was limiting the width of the image in the DDSlick dropdown widget.

    I have added this CSS code on your form 

    .dd-option-image, .dd-selected-image {

        max-width: 150px;

        width: 150px !important;

        height: 84px !important;

    }

     

    and it seems to have taken effect and increased the width of the images now.

     

    Please check again. Let us know if this did not work for you.

  • Profile Image

    Answered by Tankeroni on June 27, 2016 at 05:28 PM

    That works!  Thanks, I appreciate it.  Apparently the code needed some "!important" action.

  • Profile Image
    JotForm Support

    Answered by Kiran on June 27, 2016 at 05:36 PM

    Great! Glad to see that issue is now resolved for you. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!!