Positioning of different elements like dropdowns, textboxes and time-range Picker ?

[ranjyotiprakash]

How can we change the position of the different elements like dropdowns, textboxes and time-range Picker in a view ?

I have a view in my custom application and I want to have the dropdowns, text boxes and time-range picker in the same line as they are consuming a lot of spaces.

How can we do that ?
Thanks

[MHibbin · Accepted solution]

You will need to use custom CSS (docs here)

You make your life easier by using Mozilla Firefox and the Firebug add-on, as this will let you inspect the CSS elements.

EDIT: MORE INFO...

Okay, so firstly I would create a CSS file specific to that view in you app (e.g. $SPLUNK_HOME/etc/apps/<yourApp>/appserver/static/yourView.css).

In a recent case similar to this I used something like the following:

.dashboardContent .StaticContentSample {
    float: left;
    padding-top: 2px;
    margin-right: 5px;
}

.dashboardContent .TimeRangePicker {
    float: left;
    padding-top: 2px;
    margin-right: 5px;
}

.dashboardContent .StaticSelect {
    float: left;
    padding-top: 2px;
    margin-right: 5px;
}

.dashboardContent .ConvertToIntention {
    float: left;
    padding-top: 2px;
    margin-right: 5px;
}

Which fit my needs, you may need to experiment a little. Save this file.

You will then need to use advanced XML for this part (if you are simple XML then use "application.css"), edit your advanced XML to include the following in the "view" tag (at the beginning).

stylesheet="yourView.css"

e.g.

<view stylesheet="yourView.css">

You will then need to restart SplunkWeb to apply the new CSS file.

There are other questions similar to this, so you may be able get there.

e.g. http://splunk-base.splunk.com/answers/8223/how-to-arrange-inputs-on-a-form

Hope this helps you on your way.

MHibbin

[ranjyotiprakash]

Thanks a lot !!!

[MHibbin]

@ranjyotiprakash, please update above, if this answers your question please accept it (and upvote if your feeling nice 🙂 )

[ranjyotiprakash]

Thanks for your reply Mhibbin !
I have tried editing the CSS but, I am unable to arrange the dropdowns and Time range picker in the same line. Can you please guide me further on this ..Thanks !!!