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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...