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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...