Image Picker: Change selections to a "Check Mark" instead of a border

  • Profile Image
    chrissalinas
    Asked on November 11, 2021 at 03:02 PM

    Hi,


    Trying to see if it's possible when an image is selected to have it be "checked" instead of a border around the image.

  • Profile Image
    Amin_N
    Answered on November 11, 2021 at 04:37 PM

    Hi there,

    Thanks for reaching out to us!

    The default selection animation for the Image Picker widget is drawing a border around the item. You can change this using CSS though.

    Related guide: How-to-inject-css-codes-to-widgets

    Please let us know what exactly you wish it to look like and we shall present the respective CSS code.

    I hope I have been of any help.

  • Profile Image
    chrissalinas
    Answered on November 11, 2021 at 04:43 PM

    Hi Amin,

    I would like it to be "checked" when an image is selected. Just a gray/black check mark on the image instead of the border.

  • Profile Image
    Sonnyfer
    Answered on November 11, 2021 at 05:44 PM

    Upon testing, it looks like it isn't possible for the image selected to be checked at the moment.

    Let me escalate this to our developers as a Feature Request. Though we cannot give you an ETA, rest assured you'll be apprised here of any news.

    Meantime, you use the following code to adjust the border (when selected) to your liking.

    .divimg.selected {
     border: 2px solid blue;
    }

    Guide: How-to-inject-css-codes-to-widgets/

  • Profile Image
    chrissalinas
    Answered on November 23, 2021 at 02:10 PM

    Following up on this request. Was there any update on if I am able to have selections "checked"?

  • Profile Image
    Alexander_G
    Answered on November 23, 2021 at 03:31 PM

    Hi there, 👋

    Thanks for reaching out to us.


    Unfortunately - there's no update regarding this feature request.

    However, we will update you once we receive something from our Devs.


    Now we sent a follow-up message regarding this.


    Thanks,

    Alex

  • Profile Image
    hayk
    Answered on November 24, 2021 at 05:39 AM

    Hi there,

    We have added a drop-down list to select the style of check type.

    1637749341_619e125d512f4_imagepickerchec

    1637749414_619e12a6640a8_imagepickerimag

    If you need to change the checkmark's color here is an example.

    1637749550_619e132ee2201_imagepickercss.

    Please check if it works for you and write to us.

    Regards,

    Widgets Team

  • Profile Image
    chrissalinas
    Answered on November 24, 2021 at 01:31 PM

    Thanks Hayk!


    So I went and changed the "check type" to checkmark but it is still as border once I select an image. Below is the link to my Jotform if you're able to assist. Thanks.


    https://www.jotform.com/build/212345914070146

  • Profile Image
    chrissalinas
    Answered on November 24, 2021 at 01:43 PM

    When I am viewing the form from my phone it does show the checkmark, just when I am viewing from my desktop preview it doesn't. Appears to be working!


    For the checkmark, is it possible to have it as an overlay over the image when it is selected? I feel it is too small in the top left corner. Is there a CSS that would have it go over the photo once selected?

  • Profile Image
    Amin_N
    Answered on November 24, 2021 at 03:23 PM

    Hi again,

    Kindly inject the following CSS code into the widget:

    .divimg.check_mark:before {
        width: 59px !important;
        height: 156px !important;
        border: solid red !important;
        border-width: 0px 11.5px 11.5px 0 !important;
        border-color: red !important;
        margin: 19px 7px !important;
        margin-left: 121px !important;
    z-index: 100008 !important;
    }

    Result:

    1637784642_619e9c420a86c_

    1637785401_619e9f395e951_

    Related guide: How-to-inject-css-codes-to-widgets

    Should you have any further inquiries, we will be more than happy to help.