All Apps and Add-ons

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

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

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

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

Champion

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

0 Karma