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

---
What goes around comes around. If it helps, hit it with Karma 🙂

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

---
What goes around comes around. If it helps, hit it with Karma 🙂
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!

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...

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 GA in US-AWS!

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