Align Buttons in Sideviews

[sbsbb]

Is it possible to align buttons in Sideviews ?
I have always problems with Timerangepicker and buttons, that have no "float" parameter.

How can I align 3 buttons for example ? At the moment there are always und another...

I tried the following :

      <module name="HTML" layoutPanel="panel_row1_col1">
        <param name="html"><![CDATA[
<style type="text/css">
    .mainSearchControls .Button
    .mainSearchControls .TimeRangePicker {
    float:left;
}
</style>
    ]]></param>

        <module name="Pulldown">
          <param name="float">left</param>
          <param name="label">Plattform</param>
          <param name="name">plattform</param>
          <param name="staticOptions">
            <list>
              <param name="value">t_kihub</param>
              <param name="label">test</param>
            </list>
            <list>
              <param name="value">i_kihub</param>
              <param name="label">inte</param>
            </list>
            <list>
              <param name="selected">true</param>
              <param name="value">p_kihub</param>
              <param name="label">prod</param>
            </list>
          </param>

          <module name="Search">
            <param name="search"><![CDATA[
| dbquery $plattform$-kihub_ro "SELECT ABK,BPUIC,BEZEICHNUNG_OFFIZIELL FROM KIHUB_STAMMDATEN.BP WHERE LANDUIC=85 AND ABK IS NOT NULL ORDER BY BEZEICHNUNG_OFFIZIELL "





]]></param>

            <module name="JobProgressIndicator" />

            <module name="Pulldown">
              <param name="template">msg_property_BPUIC=$value$</param>
              <param name="count">30000</param>
              <param name="labelField">BEZEICHNUNG_OFFIZIELL</param>
              <param name="valueField">BPUIC</param>
              <param name="postProcess">$postProcess$ | dedup BPUIC | sort BP_NAME</param>
              <param name="float">left</param>
              <param name="label">BP</param>
              <param name="name">BPUIC</param>
              <param name="staticOptions">
                <list>
                  <param name="value">*</param>
                  <param name="selected">true</param>
                </list>
              </param>

              <module name="TextField">
                <param name="width">40px</param>
                <param name="template">msg_property_VMNr=$value$</param>
                <param name="float">left</param>
                <param name="name">VMNr</param>
                <param name="label">VMNr</param>
                <param name="default">*</param>

                <module name="TextField">
                  <param name="label">event_id</param>
                  <param name="float">left</param>
                  <param name="name">event_id</param>
                  <param name="default">*</param>

                  <module name="Pulldown">
                    <param name="float">left</param>
                    <param name="separator">+OR+</param>
                    <param name="template">msg_header_type=$value$</param>
                    <param name="size">5</param>
                    <param name="label">messageType</param>
                    <param name="name">messageType</param>
                    <param name="staticOptions">
                      <list>
                        <param name="value">*</param>
                        <param name="selected">true</param>
                      </list>
                      <list>
                        <param name="value">CUSM_AnschlussMeldung</param>
                      </list>
                      <list>
                        <param name="value">CUSM_AufstellungsEreignis</param>
                      </list>
                      <list>
                        <param name="value">CUSM_AusfahrtEreignis</param>
                      </list>
                      <list>
                        <param name="value">CUSM_EinfahrtEreignis</param>
                      </list>
                      <list>
                        <param name="value">CUSM_EinfahrtWarnung</param>
                      </list>
                      <list>
                        <param name="value">CUSM_FahrtKurz</param>
                      </list>
                      <list>
                        <param name="value">CUSM_FahrtVA</param>
                      </list>
                      <list>
                        <param name="value">CUSM_TagesFPL</param>
                      </list>
                      <list>
                        <param name="value">CUSM_ZNAbfahrtEreignis</param>
                      </list>
                      <list>
                        <param name="value">CUSM_ZNAbfahrtWarnung</param>
                      </list>
                      <list>
                        <param name="value">CUSM_ZNEinfahrtEreignis</param>
                      </list>
                      <list>
                        <param name="value">CUSM_ZNEinfahrtWarnung</param>
                      </list>
                      <list>
                        <param name="value">CUSM_ZNVMEinwahl</param>
                      </list>
                      <list>
                        <param name="value">CUSM_ZNVMLoeschen</param>
                      </list>
                    </param>

                    <module name="TextField">
                      <param name="width">20px</param>
                      <param name="float">left</param>
                      <param name="template">head limit=$value$</param>
                      <param name="name">limit</param>
                      <param name="label">limit (kein=0)</param>
                      <param name="default">400</param>

                      <module name="TimeRangePicker">
                        <param name="default">Last 15 minutes</param>
                        <param name="default">Last 15 minutes</param>

                        <module name="Button">
                          <param name="allowAutoSubmit">False</param>

[sideview · Accepted solution]

The relevant Sideview modules all have "float" params. If you have a bunch of Sideview form element modules (eg TextField, Pulldown) and you set their "float" params to "left" then they will all end up on one line.

However the older Splunk modules like TimeRangePicker don't have any such param or mechanism.

So you have to create a little custom CSS and put it in your app.

The most common way is to go into your app and edit appserver/static/application.css
(if there is no file there already then create the file and make sure to restart splunkWeb after you create it)

Say you have all these modules in the "mainSearchControls" layoutPanel, then you would want to put this into your css:

.mainSearchControls .TimeRangePicker {
    float:left;
}

If you only want to mess with one particular view, and that view is called "foobar", then you would have this:

.splView-foobar .mainSearchControls .TimeRangePicker {
    float:left;
}

What is also quite common, is to specify the same rule for the Pulldown and TextField modules, instead of using the float params. This is slightly preferable because then the modules will be in their final position right when the page loads. The Sideview "float" params are convenient, but if you watch closely the modules flicker a bit when the page loads.

.mainSearchControls .TimeRangePicker,
.mainSearchControls .TextField,
.mainSearchControls .Pulldown {
    float:left;
}

[sansay]

I had to work on this issue. My experiments showed that there are 2 rules that must be respected for this to work.
1. The panel to which the object belongs must be in the declaration of the formatting statement.
2. the html module must be placed after the object declaration.

Example code:

[sideview]

In the dashboard.html template (the home of "panel_row3_col1", it's weird but there is no element with class="Panel_row3_col1", which you can verify with Firebug. That may be why your style doesn't match. It says that elements with class "Button" inside elements with class "panel_row3_col1" should have such and such a style, but there are no such elements. Try changing ".panel_row3_col1" to just ".panel_row3_col", which is a div element that does exist on the page.

[sbsbb]

No I've tried with an html module, but it doesn't work :

<module name="HTML" layoutPanel="viewHeader">
<param name="html">
<![CDATA[
<h1>FahrtVA-FahrtKurz</h1>
<style type="text/css">
.panel_row3_col1 .Button {
float:left;
}
</style>
]]></param>

[sideview]

When you first create an application.css you have to restart splunkweb or the server wont realize its there. Perhaps it's just that?

[sbsbb]

Hi Nick, didn't work for me, do I missed something ? do I have to replace .mainsSearchControls in my case ?

[sideview]

Well you can always sneak a style block in with an HTML module as a last resort.

  <module name="HTML" layoutPanel="viewHeader">
    <param name="html"><![CDATA[
<style type="text/css">
    .mainSearchControls .TimeRangePicker {
    float:left;
}
</style>
    ]]></param>
  </module>

[sbsbb]

Thank you for your answer. In fact our Splunk is hosted, so I'm not able to modify some appserver/static/application.css...