topic Re: font-size of a table in XML code of splunk dashboard in Dashboards & Visualizations

font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 04:33:56 GMT

How to change font-size of a table in XML code of splunk dashboard. Curious to know if there is any that can be used?

Re: font-size of a table in XML code of splunk dashboard

renjith_nair — Fri, 22 Mar 2019 04:50:39 GMT

@juhisaxena28 ,

You can do this by adding little css to your XML . See below post from @niketnilay

https://answers.splunk.com/answers/665108/how-to-change-font-size-of-texts-inside-table-usin.html

Just add this part to your XML

       <row depends="$alwaysHideCSSPanel$">
         <panel>
           <html>
             <style>
               table tbody tr td{
                 font-size:150% !important;
               }
             </style>
           </html>
         </panel>
       </row>

Re: font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 05:08:55 GMT

Exactly where do i need to add this code. Can this be achieved by CSS only.

Re: font-size of a table in XML code of splunk dashboard

renjith_nair — Fri, 22 Mar 2019 05:12:38 GMT

anywhere in the xml , probably just above your row table element to have readability

Re: font-size of a table in XML code of splunk dashboard

vnravikumar — Fri, 22 Mar 2019 05:13:11 GMT

Try this

<dashboard>
  <label>table</label>
  <row>
    <panel>
      <table id="test">
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$hide$">
          <panel>
            <html>
              <style>

                #test th{
                   font-size: 15px !important;
                   font-weight: bold !important;
                }
               #test td{
                 font-size: 13px !important;

                }
              </style>
            </html>
          </panel>
        </row>
</dashboard>

Re: font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 06:30:27 GMT

it works , but it creates a new panel as well [with No title] after the panel where effect is applied to.
Code is like :-

</panel>


      <panel>
        <html>
          <style>
            table tbody tr td{
              font-size:150% !important;
            }
          </style>
        </html>
      </panel>
    </row>
         <row>
<panel>
  <title>Search Logs</title>
  <input type="text" token="searchKeyword" searchWhenChanged="true">
    <label>Search Keyword</label>

Re: font-size of a table in XML code of splunk dashboard

vnravikumar — Fri, 22 Mar 2019 06:33:09 GMT

Hide that panel with some dummy token like depends="$hide$"

Re: font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 06:47:52 GMT

Code is like below, but panel still exists.

      <panel depends="$Hide$">
        <html>
          <style>
            table tbody tr td{
              font-size:150% !important;
            }
          </style>
        </html>
      </panel>
    </row>
         <row>

Re: font-size of a table in XML code of splunk dashboard

vnravikumar — Fri, 22 Mar 2019 06:53:39 GMT

Another way, you create a CSS file with the above style and import to your dashboard

Re: font-size of a table in XML code of splunk dashboard

renjith_nair — Fri, 22 Mar 2019 06:55:38 GMT

@juhisaxena28 , instead of adding it as a panel , just add the entire content as separate row - just copy paste the original snippet to your XML dashboard

Re: font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 07:02:30 GMT

It all worked. Thanks

Re: font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 07:02:58 GMT

above method worked as well. Thank you.

Re: font-size of a table in XML code of splunk dashboard

niketn — Fri, 22 Mar 2019 08:37:37 GMT

@juhisaxena28, over here on answers we provide solution with CSS extension within Dashboard simple XML code as it is easier to implement a run anywhere example. However, with the intended behavior of CSS to be generic and re-usable you should make necessary changes and move the CSS code to a css file which should be saved under /appserver/static folder of your app and stylesheet reference should be added to the Simple XML dashboard. (or moved to dashboard.css in case style is truly generic and needs to be applied to all dashboards in the app without having to add reference to the css file in each dashbaord/s).

You should check out Splunk Dashboard Examples App from Splunkbase and Splunk Documentation for Simple XML CSS extension examples.

Re: font-size of a table in XML code of splunk dashboard

juhisaxena28 — Fri, 22 Mar 2019 09:06:22 GMT

Thank you for your advise.