Dashboards & Visualizations

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

juhisaxena28
Explorer

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?

Tags (2)
0 Karma

vnravikumar
Champion

Hi

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

renjith_nair
SplunkTrust
SplunkTrust

@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>
Happy Splunking!

juhisaxena28
Explorer

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

0 Karma

renjith_nair
SplunkTrust
SplunkTrust

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

Happy Splunking!
0 Karma

juhisaxena28
Explorer

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

vnravikumar
Champion

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

0 Karma

juhisaxena28
Explorer

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

vnravikumar
Champion

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

0 Karma

juhisaxena28
Explorer

above method worked as well. Thank you.

0 Karma

niketn
Legend

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

juhisaxena28
Explorer

Thank you for your advise.

renjith_nair
SplunkTrust
SplunkTrust

@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

Happy Splunking!
0 Karma

juhisaxena28
Explorer

It all worked. Thanks

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...