topic Re: Positioning of different elements like dropdowns, textboxes and time-range Picker ? in Dashboards & Visualizations

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

ranjyotiprakash — Tue, 11 Sep 2012 06:13:17 GMT

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

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

MHibbin — Tue, 11 Sep 2012 08:48:07 GMT

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

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

ranjyotiprakash — Tue, 11 Sep 2012 09:22:41 GMT

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 !!!

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

MHibbin — Tue, 11 Sep 2012 10:15:19 GMT

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

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

ranjyotiprakash — Tue, 11 Sep 2012 12:44:18 GMT

Thanks a lot !!!