Infinite List widget - change the icons for Edit/Remove buttons

  • Profile Image
    FRJotform
    Asked on March 23, 2018 at 11:11 AM

    When using the Infinite List widget, each row generated creates an edit and remove button. These buttons are, by default, pictures: a blue pencil and a red cross respectively. Unfortunately, they do not mesh well with the rest of our form's design. Is there any way to change these images? Ideally, we would just want 'normal' buttons but if that's not possible, then just the ability to upload different images would be great.


    I've attached a screenshot showing the images referenced. 


    Thank you.

  • Profile Image
    Nik_C
    Answered on March 23, 2018 at 12:49 PM

    Yes, it is possible to change the image of the edit and delete buttons.

    Here is how:

    1) Insert the below CSS to Custom CSS of the Widget:

    1521823615Screen Shot 2018-03-23 at 5.46

    .btn-edit {

        background: url(https://image.freepik.com/free-icon/edit-button_318-99287.jpg) no-repeat center center!important;

        background-size: 39px 39px!important;

    }

    .btn-delete {

        background: url(https://cdn0.iconfinder.com/data/icons/controls-and-navigation-arrows-1/24/21-128.png) no-repeat center center!important;

        background-size: 45px 45px!important;

    }

    The yellow is for edit button and the green is for delete button.

    You just have to change the URL (bold part) where you can use your own images.

    And you can adjust the size of those images (also bolded part).

    You can check how it works here: https://form.jotform.com/80814761995974

    1521823763Screen Shot 2018-03-23 at 5.49

    Let us know if you have any further questions.

    Thank you!

  • Profile Image
    FRJotform
    Answered on March 23, 2018 at 01:30 PM

    Fantastic - thank you for your help and quick response!