topic Re: Placing SearchBar+TimeRangePicker+SubmitButton inline on a custom panel (not splSearchControls-inline)? in All Apps and Add-ons

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

greg — Mon, 28 Sep 2020 10:07:29 GMT

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?

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

sideview — Fri, 18 Nov 2011 07:39:43 GMT

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.

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

greg — Fri, 18 Nov 2011 11:05:06 GMT

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?

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

sideview — Fri, 18 Nov 2011 16:30:06 GMT

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.

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

greg — Fri, 18 Nov 2011 20:31:36 GMT

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