How to arrange inputs on a form

[ericrobinson]

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?

[southeringtonp]

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;
}