topic Re: Align Buttons in Sideviews in All Apps and Add-ons

Align Buttons in Sideviews

sbsbb — Thu, 23 Jan 2014 08:22:23 GMT

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 :

True

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

Re: Align Buttons in Sideviews

sideview — Tue, 28 Jan 2014 23:35:33 GMT

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

Re: Align Buttons in Sideviews

sbsbb — Wed, 29 Jan 2014 08:50:40 GMT

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

Re: Align Buttons in Sideviews

sideview — Wed, 29 Jan 2014 17:36:46 GMT

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>

Re: Align Buttons in Sideviews

sbsbb — Tue, 04 Mar 2014 13:28:03 GMT

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

Re: Align Buttons in Sideviews

sideview — Tue, 04 Mar 2014 16:53:21 GMT

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

Re: Align Buttons in Sideviews

sbsbb — Fri, 18 Jul 2014 12:34:24 GMT

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>

Re: Align Buttons in Sideviews

sideview — Mon, 28 Sep 2020 17:08:06 GMT

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.

Re: Align Buttons in Sideviews

sansay — Thu, 07 Aug 2014 16:49:57 GMT

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:

<![CDATA[

]]>