Dashboards & Visualizations

How to arrange inputs on a form

ericrobinson
Path Finder

I have a form using simple XML to search through some of our logs to present some data in a human readable format.

Unfortunately, the layout is less than desirable.

Is there a way to arrange the inputs better?

alt text

Tags (1)

southeringtonp
Motivator

You can modify the CSS, but I'm not sure that it's possible to specify a per-page stylesheet in the Simple XML view.

You can set the CSS for the whole application, but it may have undesirable side effects. The ideal case would be to convert to Advanced XML (add ?showsource=1 to the URL to see the equivalent XML for your existing form).

Once you've done that, you can start your form with:

<view template="dashboard.html" objectMode="SimpleForm"
    onunloadCancelJobs="true" stylesheet="customized.css">

Then place your custom CSS in appserver/static/customized.css (the filename doesn't matteras long as it matches the view definition above:

/* Labels should be above field names, not beside them. */
label {
    display: block;
}

/* Dropdown and text boxes are way too wide by default. */
.splFormSearch .ExtendedFieldSearch,
.splFormSearch .SearchSelectLister {
    min-width: 100px;
    margin: 0;
    vertical-align: top;
    display: block;
    float: left;
    line-height: 25px;
    padding:5px 0 0 10px;
    height: 64px;
}

/* Push the latter two dropdowns down slighty; make them even with the others */
.StaticSelect {
    margin-top: 4px;
    vertical-align: top;
    display: block;
    float: left;
    line-height: 25px;
    padding:5px 0 0 10px;
    height: 64px;
}
Get Updates on the Splunk Community!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...