Splunk Search

Icons Disappear From A Table While Word Wrap Is Disabled

rkeq0515
Path Finder

I have a table where the first four columns includes an icon.  I want to have word wrap disabled.  When I disable word wrap my icons disappear from a table.  I can't seem to figure out what's going on with this.  I tried expanding the table rows (width and height) to see if the icons were hiding, but that does not seem to be the case.

 

Screenshot of icons with word wrap enabled:

rkeq0515_0-1631026657552.png

Screenshot of icons disappearing with word wrap disabled (preferred configuration):

rkeq0515_1-1631026736172.png

 

Here is the code I am using:

icons.js

require([
      'underscore',
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/tableview',
      'splunkjs/mvc/simplexml/ready!'
  ], function(_, $, mvc, TableView) {

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
          /*  return cell.field; */
            return _(['Column1','Column2','Column3','Column4']).contains(cell.field);
        },
render: function($td, cell) {
            var value = cell.value;
            if(value=="col1data" )
                {
                    $td.html("<div class='col1data'> </div>")
                }
            else if(value=="col2data")
            {
                    $td.html("<div class='col2data'> </div>")
            }
            else if(value=="col3data")
            {
                    $td.html("<div class='col3data'> </div>")
            }
            else if(value=="col4data")
            {
                    $td.html("<div class='col4data'> </div>")
            }

        }
    });

    var sh = mvc.Components.get("table1");
    if(typeof(sh)!="undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }

  });

 

icons.css

#table1 .col1data {
   background-image: url('/static/app/testapp/images/col1.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
/*   background-color: coral; !important; */
}

#table1 .col2data {
   background-image: url('/static/app/testapp/images/col2.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
   }

#table1 .col3data {
   background-image: url('/static/app/testapp/images/col3.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
   }

#table1 .col4data {
   background-image: url('/static/app/testapp/images/col4.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
   }

 

Labels (2)
Tags (4)
0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...