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!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...