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!

Using Machine Learning for Hunting Security Threats

WATCH NOW Seeing the exponential hike in global cyber threat spectrum, organizations are now striving more for ...

New Learning Videos on Topics Most Requested by You! Plus This Month’s New Splunk ...

Splunk Lantern is a customer success center that provides advice from Splunk experts on valuable data ...

How I Instrumented a Rust Application Without Knowing Rust

As a technical writer, I often have to edit or create code snippets for Splunk's distributions of ...