Dashboards & Visualizations

Remove "No title" From Dashboard Panels and Panel Visualizations

genesiusj
Builder

Hello,
I'm trying to learn (if possible) how to remove the space left by No title in panels and visualizations. I want to reclaim this real estate.

When editing vs results in dashboard.

alt text alt text

Thanks and God bless,
Genesius

0 Karma
1 Solution

genesiusj
Builder

1) Did some digging around with the Inspect Element in FireFox.
2) Found the underlying (not seen in dashboard editor) element was <div class="panel-body html">
3) Googled "css hide element panel-row div".
4) Found this property: display: value;.
5) Added to various areas in my XML,

    <panel depends="$alwaysHideCSS$">
      <html>
       <style>
         #prtr1{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr2{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr3{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr4{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr5{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr6{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr7{
           width:17% !important;
           padding-top: 1px !important;
           padding-botom: 1px !important;
         }
         .dashboard-body {
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             background: #1E93C6 !important;
         }
         .dashboard-header h2{
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             color: #ff0000 !important;
         }
         .dashboard-panel {
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             text-align: center !important;
             font-weight: bold !important;
             border-top-right-radius: 15px;
             border-top-left-radius: 15px;
             line-height: 1px; !important;
         }
         .dashboard-cell {
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             background: #7d8073 !important;
         }
          thead{
            display: none !important;
         }
         </style>
      </html>
    </panel>

till it worked.

The original thead{ visibility: hidden; } was removed from each element.

Thanks and God bless,
Genesius

View solution in original post

0 Karma

genesiusj
Builder

1) Did some digging around with the Inspect Element in FireFox.
2) Found the underlying (not seen in dashboard editor) element was <div class="panel-body html">
3) Googled "css hide element panel-row div".
4) Found this property: display: value;.
5) Added to various areas in my XML,

    <panel depends="$alwaysHideCSS$">
      <html>
       <style>
         #prtr1{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr2{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr3{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr4{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr5{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr6{
           width:17% !important;
           padding-top: 1px !important;
         }
         #prtr7{
           width:17% !important;
           padding-top: 1px !important;
           padding-botom: 1px !important;
         }
         .dashboard-body {
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             background: #1E93C6 !important;
         }
         .dashboard-header h2{
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             color: #ff0000 !important;
         }
         .dashboard-panel {
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             text-align: center !important;
             font-weight: bold !important;
             border-top-right-radius: 15px;
             border-top-left-radius: 15px;
             line-height: 1px; !important;
         }
         .dashboard-cell {
             padding-top: 1px !important;
             padding-bottom: 1px !important;
             background: #7d8073 !important;
         }
          thead{
            display: none !important;
         }
         </style>
      </html>
    </panel>

till it worked.

The original thead{ visibility: hidden; } was removed from each element.

Thanks and God bless,
Genesius

0 Karma

cmerriman
Super Champion

It's not the No Title that's taking up space, it's the html break that you have. you might be able to use some CSS to reduce the space, but I don't have any written up that'll help at the moment.

0 Karma

genesiusj
Builder

Thanks cmerriman.

Anyone have any ideas? I'm checking the Dashboards app, but I can't find anything helpful.
I'm also Googling, but don't know how to phrase it. I'm seeing css for
tags, but I don't think that is it.
Thanks and God bless,
Genesius

0 Karma
Get Updates on the Splunk Community!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer at Splunk .conf24 ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...

Share Your Ideas & Meet the Lantern team at .Conf! Plus All of This Month’s New ...

Splunk Lantern is Splunk’s customer success center that provides advice from Splunk experts on valuable data ...