Splunk Search

How I can resize the table length so that the scrolling option I can remove.

hrs2019
Path Finder

Hello everyone

How I can resize the table length so that the scrolling option I can remove and I can see all the field at the same time without scrolling right or left
I want to display 'Area CP Name' field output in the below format so that the scrolling right or left issue I can fix.

Area CP Name
1. dcdio.dv.
gethdhsdhthrd
2. dcdio.dv.
gethdhsdhthrd

My XML code is

<dashboard theme="dark">
  <label>Clone</label>
  <row>
    <panel>
      <table>
        <search>
          <query>| inputlookup raj100|table ApName "Area Nmae Details" "Area CP Name" CLevel Date "Issue Description" "MD Name" PinID "Recommended Fix" "SC Title Name" Srate Task Title URL</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">4</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

alt text

0 Karma
1 Solution

DavidHourani
Super Champion

Hi @hrs2019,

Based on your data, I doubt changing the column or table width will do anything to rid you of the horizontal scrollbar as it's already at 100% of the page. This leaves you with the following options :
1- Reduce the number of fields displayed on the table.
2- Use a higher resolution.
3- Reduce the font size for the table content :

 <dashboard theme="dark">
   <label>Clone</label>
   <row>
   <panel depends="$alwaysHideCSS$">
   <html>
     <style>
       #myTableStyle{
         font-size: 50% !important;
       }
     </style>
   </html>
 </panel>
 <panel id="myTableStyle">
       <table>
         <search>
           <query>| inputlookup raj100|table ApName "Area Nmae Details" "Area CP Name" CLevel Date "Issue Description" "MD Name" PinID "Recommended Fix" "SC Title Name" Srate Task Title URL</query>
           <earliest>-24h@h</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">4</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="percentagesRow">false</option>
         <option name="refresh.display">progressbar</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>
 </dashboard>

You can control the font size using the font-size CSS option I added to your xml.

If you still need to set your table width you can use that option as well under #myTableStyle.

Let me know if that works out for your !

Cheers,
David

View solution in original post

0 Karma

DavidHourani
Super Champion

Hi @hrs2019,

Based on your data, I doubt changing the column or table width will do anything to rid you of the horizontal scrollbar as it's already at 100% of the page. This leaves you with the following options :
1- Reduce the number of fields displayed on the table.
2- Use a higher resolution.
3- Reduce the font size for the table content :

 <dashboard theme="dark">
   <label>Clone</label>
   <row>
   <panel depends="$alwaysHideCSS$">
   <html>
     <style>
       #myTableStyle{
         font-size: 50% !important;
       }
     </style>
   </html>
 </panel>
 <panel id="myTableStyle">
       <table>
         <search>
           <query>| inputlookup raj100|table ApName "Area Nmae Details" "Area CP Name" CLevel Date "Issue Description" "MD Name" PinID "Recommended Fix" "SC Title Name" Srate Task Title URL</query>
           <earliest>-24h@h</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">4</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">none</option>
         <option name="percentagesRow">false</option>
         <option name="refresh.display">progressbar</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
       </table>
     </panel>
   </row>
 </dashboard>

You can control the font size using the font-size CSS option I added to your xml.

If you still need to set your table width you can use that option as well under #myTableStyle.

Let me know if that works out for your !

Cheers,
David

0 Karma

hrs2019
Path Finder

Hi @DavidHourani Thank-you its is working but there is some issue in Panel id side

**** (already used panel id so how i can use in both the places)

    <label>Clone</label>
    <row>
    <panel depends="$alwaysHideCSS$">
    <html>
      <style>
        #myTableStyle{
          font-size: 50% !important;
        }
      </style>
    </html>
  </panel>

  ****** (already used here panel id so how i can reused  in both the places)** 
        <table>
          <search>
            <query>| inputlookup raj100|table ApName "Area Nmae Details" "Area CP Name" CLevel Date "Issue Description" "MD Name" PinID "Recommended Fix" "SC Title Name" Srate Task Title URL</query>
            <earliest>-24h@h</earliest>
            <latest>now</latest>
            <sampleRatio>1</sampleRatio>
          </search>
          <option name="count">4</option>
          <option name="dataOverlayMode">none</option>
          <option name="drilldown">none</option>
          <option name="percentagesRow">false</option>
          <option name="refresh.display">progressbar</option>
          <option name="rowNumbers">false</option>
          <option name="totalsRow">false</option>
          <option name="wrap">true</option>
        </table>
      </panel>
    </row>
0 Karma

DavidHourani
Super Champion

Hi @hrs2019,

Since an ID in css is unique, all you have to do is create a new one for your other table. This allows you to make specific changes for each table when needed :

 <html>
   <style>
     #myFirstTableStyle{
       font-size: 50% !important;
     }
     #mySecondTableStyle{
       font-size: 50% !important;
     }
   </style>
 </html>

Your CSS should look something like the above and then you can use one ID for each table.

0 Karma

hrs2019
Path Finder

Hi @DavidHourani Thank-you but there is no way to use same panel for different id like one is for css and other is for depend

0 Karma

DavidHourani
Super Champion

@hrs2019, what do you mean ? You can use a CSS class instead of an ID if you wish to reuse. Is that what you're asking ? And btw the depends="$alwaysHideCSS$" can be renamed to whatever you want, this is just used to hide this html panel, so you can rename the token to anything as long as that token is not set you should be okay.

0 Karma

hrs2019
Path Finder

Hi @DavidHourani
I want to use css for same panel for which i i am using depends

so just want to know how i can use both in the same time for same panel

like

0 Karma

DavidHourani
Super Champion

Ohhhh okay, gotcha, you can't because the depends panel is hidden. So if you add the table in there it will disappear as well ! The depends Panel will not show on your page so only put configuration that you wish to hide in there 🙂

0 Karma

hrs2019
Path Finder

Thanks @DavidHourani there is no other way right ?

0 Karma

chaitanya1996
Engager

You can use CSS to adjust table size and adjust the width of your column or cell or row as per your requirement using table class.

0 Karma

hrs2019
Path Finder

Hi @chaitanya1996 can you pls help me in the css code

0 Karma

chaitanya1996
Engager
0 Karma

hrs2019
Path Finder

Hi @chaitanya1996
i want to display output field "Area CP Name" in the below format i
Now displaying

Area CP Name                                 want to display 
1. dcdio.dv.gethdhsdhthrd             1. dcdio.dv.
                                         gethdhsdhthrd
2. dcdio.dv.gethdhsdhthrd             2. dcdio.dv.
                                         gethdhsdhthrd
0 Karma
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...