All Apps and Add-ons

Placing SearchBar+TimeRangePicker+SubmitButton inline on a custom panel (not splSearchControls-inline)?

greg
Communicator

I'm developing a custom view and I want to place standard search controls to one of my panels.

The layout should be something like (this is a separate panel, layed out as panel_row2_col1):

HtmlText

PullDown PullDown TextEdit

HtmlText

SearchEditBox TimeRangePicker SubmitButton

I can assign float=left to the 3 topmost elements so all of them are inline (since they are Sideview controls and support "float" property). But search-related elements are standard Splunk controls and they are always placed in one column, one under another:

SearchEditBox

TimeRangePicker

SubmitButton

Can I somehow adjust my CSS file (or view stylesheet option) to achieve inline placement of these 3 elements? They should still remain on the same panel with pulldowns.

Note: I didn't create any application, so all my views are in context of the standard search application. What CSS file should I use then?

1 Solution

sideview
SplunkTrust
SplunkTrust

In the <view> tag of your custom view, add a stylesheet attribute in the formof stylesheet="custom.css". Then in $SPLUNK_HOME/etc/apps/search/appserver/static/, create a file called custom.css. Place your float rules in that custom stylesheet. It'll work great and it'll survive upgrades.

You could theoretically add the float styles to the search app's application.css file, and thus avoid creating a new file. However this is a bad idea. Since the search app packages its own application.css, and since the search app is itself packaged in the Splunk download, then whenever you upgrade Splunk, your changes to that application.css file would be overwritten.

http://docs.splunk.com/Documentation/Splunk/latest/Developer/UseCSS

UPDATE: Whenever you add any new css or js file to the system like this, you have to restart splunkWeb for it to pick it up. "splunk restart splunkWeb" or "splunk restartss" from the CLI, or just restart the whole server.

View solution in original post

greg
Communicator

Thanks, I like the way with the custom css file.

I have placed there the following rules:

.SearchBar,
.TimeRangePicker,
.SubmitButton {

float:left;

}

but with no effect (still having column-like layout).
To apply changes, I usually click the Splunk logo in the top left corner.

Did I miss something?

0 Karma

greg
Communicator

Yes, I've already discovered this wonderful feature! But still getting used to this forum... 😉

0 Karma

sideview
SplunkTrust
SplunkTrust

See update. requires a restart of SplunkWeb to pick up new static files. Also note you can comment on answers rather than posting your answers, which is a little cleaner.

0 Karma

sideview
SplunkTrust
SplunkTrust

In the <view> tag of your custom view, add a stylesheet attribute in the formof stylesheet="custom.css". Then in $SPLUNK_HOME/etc/apps/search/appserver/static/, create a file called custom.css. Place your float rules in that custom stylesheet. It'll work great and it'll survive upgrades.

You could theoretically add the float styles to the search app's application.css file, and thus avoid creating a new file. However this is a bad idea. Since the search app packages its own application.css, and since the search app is itself packaged in the Splunk download, then whenever you upgrade Splunk, your changes to that application.css file would be overwritten.

http://docs.splunk.com/Documentation/Splunk/latest/Developer/UseCSS

UPDATE: Whenever you add any new css or js file to the system like this, you have to restart splunkWeb for it to pick it up. "splunk restart splunkWeb" or "splunk restartss" from the CLI, or just restart the whole server.

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 ...