Editable Table possible to change icons?

Editable Table possible to change icons?

  

Hi, is possible to change the icons from a Editable Table? I tried with this script:


$('#i.fa.fa-trash-o').attr('class', 'fa fa-home');

But nothing happen. (Oustystems 9.1)



You can probably change it with CSS.

Hi Luis,

I haven't got to see where you would put that piece of code... But the correct code is:

$('i.fa.fa-trash-o').attr('class', 'fa fa-home');

The '#' will select a html element with that id. What you want is to select the element 'i'.

See if that works.

Cheers,

José

José Costa wrote:

Hi Luis,

I haven't got to see where you would put that piece of code... But the correct code is:

$('i.fa.fa-trash-o').attr('class', 'fa fa-home');

The '#' will select a html element with that id. What you want is to select the element 'i'.

See if that works.

Cheers,

José

 i put it on one expression or on the JavaScript of the web screen


Hi, I put it on a expression or a web Screen Screen JavaScript and it did not work.


Hi Luis,

This solution works for me, but be warned that it is a somewhat old use of event listener and/or may not work in all browsers:

  • Create a new Webblock
  • In its Javascript property add this:
function changeIcons(){
  $('i.fa.fa-trash-o').attr('class', 'fa fa-home');
}

$( document ).ready(function() {
    $('.EditableTable').on("DOMSubtreeModified", changeIcons);
});
  • Add the created Webblock to your screen.

Let me know if this also works for you.

Cheers,

José

Solution

Hello Luis,


You can more easily change it by straight CSS. 

.DeleteRowAction i.fa.fa-trash-o:before {
   content: "\f015";
}

.DeleteRowAction is targeting the EditableTable CSS.  This will only change the CSS of that particular Icon using it's Unicode reference.  Let me know if this works for you.

Cheers,

Joshua

Solution

José Costa wrote:

Hi Luis,

This solution works for me, but be warned that it is a somewhat old use of event listener and/or may not work in all browsers:

  • Create a new Webblock
  • In its Javascript property add this:
function changeIcons(){
  $('i.fa.fa-trash-o').attr('class', 'fa fa-home');
}

$( document ).ready(function() {
    $('.EditableTable').on("DOMSubtreeModified", changeIcons);
});
  • Add the created Webblock to your screen.

Let me know if this also works for you.

Cheers,

José

Hi, yes it did work :) thx for the help. The CSS worked to , thx Joshua Rivers.

.DeleteRowAction i.fa.fa-trash-o:before {
   content: "\f015";
}