All Apps and Add-ons

Sideview Textfield form: how to insert a line between fields?

the_wolverine
Champion

My form fields are right up next to each other. How would I insert a line between fields so that they are on top of each other?

0 Karma
1 Solution

sideview
SplunkTrust
SplunkTrust

Well generally if two Sideview form element modules are aligning next to eachother left-to-right, it's because the one on the left has an explicit param on it that is doing so:

 <param name="float">left</param>

In which case removing the param would give you the default behavior where they are each on their own line. Often working module config is pasted around from view to view so this might have been in there all along.

Failing that, the other thing I can think of, is maybe your modules are in the layoutPanel called "splSearchControls-inline", which is a bit of an outlier among the layoutPanels. That layoutPanel actually builds a little invisible table with a single row, and puts each module in the panel into its own cell in that one row. Then it always makes the first cell as wide as possible and it smooshes the rest together. It's designed to do SearchBar + TimeRangePicker + SubmitButton, and it works great for that combination. However for pretty much any other situation it's not a very useful layoutPanel and I advise avoiding it in your views.

A third possibility, is that someone has put some float rules into application.css, or into a custom css file that they've added. The best way to rule that out is to use something like Firebug on Firefox, or the page inspect tool in Chrome, to look at the live CSS affecting your modules. Those tools will break out exactly what CSS rules are applying to your elements, and what files they are coming from. So if you see a "float:left;" on the leftmost of your two modules, figure out what file is doing it and why it's there.

View solution in original post

sideview
SplunkTrust
SplunkTrust

Well generally if two Sideview form element modules are aligning next to eachother left-to-right, it's because the one on the left has an explicit param on it that is doing so:

 <param name="float">left</param>

In which case removing the param would give you the default behavior where they are each on their own line. Often working module config is pasted around from view to view so this might have been in there all along.

Failing that, the other thing I can think of, is maybe your modules are in the layoutPanel called "splSearchControls-inline", which is a bit of an outlier among the layoutPanels. That layoutPanel actually builds a little invisible table with a single row, and puts each module in the panel into its own cell in that one row. Then it always makes the first cell as wide as possible and it smooshes the rest together. It's designed to do SearchBar + TimeRangePicker + SubmitButton, and it works great for that combination. However for pretty much any other situation it's not a very useful layoutPanel and I advise avoiding it in your views.

A third possibility, is that someone has put some float rules into application.css, or into a custom css file that they've added. The best way to rule that out is to use something like Firebug on Firefox, or the page inspect tool in Chrome, to look at the live CSS affecting your modules. Those tools will break out exactly what CSS rules are applying to your elements, and what files they are coming from. So if you see a "float:left;" on the leftmost of your two modules, figure out what file is doing it and why it's there.

the_wolverine
Champion

Ah yes. Apparently I am using that param without understanding what it does. Thank you!

0 Karma
Get Updates on the Splunk Community!

Detecting Remote Code Executions With the Splunk Threat Research Team

REGISTER NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If ...

Observability | Use Synthetic Monitoring for Website Metadata Verification

If you are on Splunk Observability Cloud, you may already have Synthetic Monitoringin your observability ...

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...