How can I increase the size of the images inside the DDSlick Dropdown Widget?

  • mbewley
    Asked on January 2, 2019 at 1:37 PM

    Could someone assist me with the following...

    I want to make images/animated gifs appear larger (150px max width) anytime I add images using the "ddSlick Dropdown" widget. 

    Once selected from the ddSlick Dropdown, I want images/animated gifs to display larger (150px max width).

    Perhaps there's is CSS code I can add?

    Thank you in advance for your time and assistance.

    Jotform Thread 1687298 Screenshot
  • Support_Management Jotform Support
    Replied on January 2, 2019 at 3:06 PM

    Hey @mbewley - You're right, you can use CSS to adjust the size of the images. Inject these CSS codes to each and every DDSlick widget in your form. These will be pasted in the CUSTOM CSS tab of each widget:

    .dd-option-image {

        max-width: 150px !important;

    }

    Complete guide: How-to-Inject-CSS-Codes-to-Widgets

  • Support_Management Jotform Support
    Replied on January 2, 2019 at 5:43 PM

    Ah, you're right, the selected image is smaller. Please change the previous codes I sent and replace them with these:

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

        max-width: 150px !important;

    }

    These CSS classes should take care of both the options inside the dropdown and the selected image.

  • Michael Bewley
    Replied on January 2, 2019 at 9:48 PM

    That worked with the image for both the dropdown and selection, but now the text is not wrapping once the image is selected.

    Thank you again for your continued assistance as it is GREATLY appreciated!!!

    Regards,

    Mike

    1546483679Screen Shot 2019 01 02 at 9 Screenshot 10

    1546483705Screen Shot 2019 01 02 at 9 Screenshot 21

  • Nik_C
    Replied on January 3, 2019 at 1:40 AM

    I tested this issue, but I wasn't able to replicate it:

    How can I increase the size of the images inside the DDSlick Dropdown Widget? Image 10

    Did you try testing it on the actual device?


  • Michael Bewley
    Replied on January 3, 2019 at 7:15 AM

    I did not. Pretty foolish of me-- sorry!

    It works flawlessly. Thank you both for your help!

  • mbewley
    Replied on January 7, 2019 at 11:30 AM

    This is weird...

    Now the text is NOT wrapping. I tried it on my phone too (see screenshot)

    Your assistance is greatly appreciated!!!???

    1546878583IMG 57EF4258FB58 1 Screenshot 10

  • Support_Management Jotform Support
    Replied on January 7, 2019 at 12:48 PM

    Since the original question in this thread is already resolved, I moved this discussion to a separate thread to avoid confusion:

    https://www.jotform.com/answers/1692071

    I'll reply there shortly.