Dashboards & Visualizations

Move an input class to bottom of panel

timgren
Path Finder

I understand that Splunk CSS defaults any <input> class to reside at the top of any panel.

I would like to override this setting, and put an input (such as radio, or checklist) at the bottom of the panel, under a results table.

None of the css positioning alterations using panel ID work for <input> class, even with !important. 

Any ideas? 

Labels (2)

timgren
Path Finder

Thanks - but this only works when the top panel and input panel is the first within the row. My challenge is that it's the 2nd or 3rd panel within the same row. 

danspav
SplunkTrust
SplunkTrust

Hi @timgren 

The easiest option to do this is to add a blank panel under the results table and add the inputs to that:
 

danspav_0-1603585832395.png

 

If you want to move the inputs to underneath the results table, you can try some CSS like this:
First, add IDs to the inputs you want to move - e.g. : 

<input type="radio" token="radio" id="move_radio">

Then add some CSS to your dashboard:

 <row depends="$CSS$"><panel><html>
        <style>
          #move_txt, #move_radio, #move_check { position:relative; top:555px;z-index:1;}
          #row2 { margin-top: 200px}
        </style>
</html></panel></row>

That gives you this - with room underneath for the next panel:

danspav_1-1603586260891.png

That's prone to issues though as when you resize the window the results panel will also resize, so you may need to adjust the CSS to move the inputs to fit.

To be sure, you'd need to add some JavaScript to the dashboard to make sure the inputs moved when the window was resized.

Something like this:

require(['jquery', 'underscore', 'splunkjs/mvc'], function($, _, mvc) {
	$( window ).ready(move_inputs);
	$( window ).resize(move_inputs);
	
	function move_inputs( jQuery){
		var position = $("#results_panel").position()
		var height = $("#results_panel").height();
		var newtop = position.top + height - 40;
		console.log("Moving to : " + newtop + "px");
		$( "#move_txt" ).css({top:newtop + "px"});
		$( "#move_radio" ).css({top:newtop + "px"});
		$( "#move_check" ).css({top:newtop + "px"});
	}
 });

 

That assumes that you have the panel called "results_panel" and ids for the inputs as above.

 

 

 

 

 

Get Updates on the Splunk Community!

Infographic provides the TL;DR for the 2023 Splunk Career Impact Report

We’ve been shouting it from the rooftops! The findings from the 2023 Splunk Career Impact Report showing that ...

Splunk Lantern | Getting Started with Edge Processor, Machine Learning Toolkit ...

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

Enterprise Security Content Update (ESCU) | New Releases

In the last month, the Splunk Threat Research Team (STRT) has had 2 releases of new security content via the ...