Dashboards & Visualizations

Remove the reserved space for title bar left behind after hiding the title bar

sh254087
Communicator

I am hiding the title bar using - hideTitle="true". However, the space used by the title bar still exists even while the title bar is hidden. I need to hide the title bar along with removing the space that's used or reserved by the title bar. Can someone please let me know how I can achieve this?

0 Karma
1 Solution

renjith_nair
Legend

@sh254087,

Try adding this css part to your dashboard,

  <row depends="$IamSupposedToBeHiddenAlways$">
     <html>
         <head>
             <style type="text/css">
                .dashboard-header {
                    margin-bottom: 10px;
                    padding-top: 10px;
                    min-height: 0px;
                }
             </style>
         </head>
     </html>
   </row>

Adjust the padding-top to increase/decrease the margin

Happy Splunking!

View solution in original post

0 Karma

louismai
Path Finder

I had to place this code within the first panel. I cannot put it in the row element.

  <head>
    <style type="text/css">
      .splunk-header {
        min-height: 0px;
      }
      .dashboard-header{
        overflow: hidden;
        margin-bottom: 0px;
        padding-top: 0px;
        min-height: 0px;
      }

    </style>
  </head>
</html>
0 Karma

renjith_nair
Legend

@sh254087,

Try adding this css part to your dashboard,

  <row depends="$IamSupposedToBeHiddenAlways$">
     <html>
         <head>
             <style type="text/css">
                .dashboard-header {
                    margin-bottom: 10px;
                    padding-top: 10px;
                    min-height: 0px;
                }
             </style>
         </head>
     </html>
   </row>

Adjust the padding-top to increase/decrease the margin

Happy Splunking!
0 Karma

sh254087
Communicator

Thank you very much, @renjith.nair. This sure helped.

This removed the title bar space to a much extent. However a little gap still existed which as well got removed after adding another small piece of CSS.

body,
           .dashboard-body,
           .footer,
           .dashboard-panel,
           .nav,
           .dashboard-cell{
                overflow: hidden;
                top: -20;
             }
             .dashboard-body{
              top: -20;
             }
0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...