Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to add a horizontal scroll bar in a row of panels?

neerajs_81
Builder
‎08-06-2023 10:30 PM

Hi All,   i have a row in my dashboard which consists of multiple panels in one line as shown below.  Is there a way to put a horizontal scroll bar  at the bottom of this row so that it allow me to slide left to right and that way i can enlarge these panels ?  My requirement is to make all the 10 boxes (panel) fit in the same row and make them readable and slightly bigger.  Autosize ends up shrinking some words.

neerajs_81_0-1691385794304.png

The xml code for above is something like this:

 

<row>
    <panel>
      <single>
        <title>Initial Access</title>
        <search>
          <query></query>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">all</option>
        <option name="height">125</option>
        <option name="rangeColors">["0x000","0xd93f3c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
     </single>
    </panel>
    <panel>
      <single>
        <title>Execution</title>
         ....
  </single>
    </panel>
  ....
</row>

 

I am aware that by including overflow: auto  inside a HTML block of a panel will show the scroll bar for that individual panel.  But in my case, i need a common scroll bar for all the panels in the same row.
Hope i am clear

 

Labels (3)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

ITWhisperer
SplunkTrust
SplunkTrust
‎08-07-2023 04:27 AM

Try something like this

  <row depends="$alwayshide$">
    <panel>
      <html>
        <style>
          #widerow {
            overflow: auto;
            display: flex !important;
            flex-direction: row !important;
          }
          #widerow .dashboard-cell {
            width: 15% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="widerow">
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>

View solution in original post

0 Karma
Reply
Solved! Jump to solution
Solution

ITWhisperer
SplunkTrust
SplunkTrust
‎08-07-2023 04:27 AM

Try something like this

  <row depends="$alwayshide$">
    <panel>
      <html>
        <style>
          #widerow {
            overflow: auto;
            display: flex !important;
            flex-direction: row !important;
          }
          #widerow .dashboard-cell {
            width: 15% !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row id="widerow">
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval count=random()%100</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
0 Karma
Reply
Solved! Jump to solution

neerajs_81
Builder
‎08-07-2023 04:31 AM

That works. Thank you so much !!!!

Tags (1)
0 Karma
Reply
Get Updates on the Splunk Community!

Your Guide to SPL2 at .conf24!

So, you’re headed to .conf24? You’re in for a good time. Las Vegas weather is just *chef’s kiss* beautiful in ...

Get ready to show some Splunk Certification swagger at .conf24!

Dive into the deep end of data by earning a Splunk Certification at .conf24. We're enticing you again this ...

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

Now On-Demand Join us to learn more about how you can leverage Service Level Objectives (SLOs) and the new ...