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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...