"splFormSearch" not class of body --> ugly layout

[fu8R5juiNP64AKI]

Hey there,

I set up a few views with advanced views. The majority of my views are looking good as one would expect. But there are some views where the fieldpickers are listed below eachother. When I looked into the css I figured that there is a float:left missing. The corresponding line in the css is:

/* FORM SEARCH LAYOUT FIXES */
/* normalize formSearch module heights only in viewHeader*/
.splFormSearch .viewHeader .StaticSelect,
.splFormSearch .viewHeader .TimeRangePicker,
.splFormSearch .viewHeader .ExtendedFieldSearch,
.splFormSearch .viewHeader .SearchSelectLister,
.splFormSearch .viewHeader .SearchRadioLister,
.splFormSearch .viewHeader .SubmitButton
{
    float:left;
    min-height:55px;
    _height:55px; /*fake min-height for ie6*/
}

The views with the bad layout do not have the splFormSearch as class of body. What causes splunk to sometimes leave splFormSearch out?

splunk-version: 5.0.2

[sideview · Accepted solution]

splFormSearch is included only on the <form> style Simple XML views. However when you use the ?showsource=1 trick to convert from Simple XML to advanced XML, you'll inadvertently bring this little objectMode="SimpleForm" attribute into your Advanced XML, and its presence there is enough to turn on the class="splFormSearch" behavior in the rendered view. So anyway, in effect the attribute can commonly be found in advanced XML too.

I wouldn't advise relying on this. For one thing I wouldn't trust Splunk not to change all this CSS when there's a major version change. For another this is only going to style all the core splunk elements, and since you've tagged the question with 'sideview' I assume you're using TextField instead of ExtendedFieldSearch, and Pulldown instead of StaticSelect and SearchSelectLister and so on and so forth.

By convention I put all form element modules up in the "mainSearchControls" layoutPanel, and although they all do have "float" params ( <param name="float">left</param> ), since that style doesn't get applied for a second or two after the page loads, there's a jitter effect. So I lock it down by putting custom CSS into the page as well. Here's a simple starting point.

.mainSearchControls .TimeRangePicker,
.mainSearchControls .TextField,
.mainSearchControls .Pulldown,
.mainSearchControls .Checkbox,
.mainSearchControls .Checkboxes {
  float:left;
}

[fu8R5juiNP64AKI]

I just found the solution myself. It was a copy&paste problem.

In the view tag I had objectMode="SimpleDashboard" Now I switched it to "SimpleForm" and everything works fine.