Dashboards & Visualizations

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

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

SplunkTrust
SplunkTrust

@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

View solution in original post

0 Karma

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

SplunkTrust
SplunkTrust

@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

View solution in original post

0 Karma

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