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!

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...