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

  • 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.

    Jotform Thread 1424064 Screenshot
  • Nik_C
    Replied 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 Screenshot 10

    .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 Screenshot 21

    Let us know if you have any further questions.

    Thank you!

  • FRJotform
    Replied on March 23, 2018 at 1:30 PM

    Fantastic - thank you for your help and quick response!