topic Re: How I can resize the table length so that the scrolling option I can remove. in Splunk Search

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

hrs2019 — Mon, 27 Apr 2020 15:56:43 GMT

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>

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

chaitanya1996 — Mon, 27 Apr 2020 17:31:55 GMT

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.

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

hrs2019 — Mon, 27 Apr 2020 17:40:22 GMT

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

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

chaitanya1996 — Tue, 28 Apr 2020 04:38:49 GMT

Hi @hrs2019 , check with this link: https://answers.splunk.com/answers/636935/column-width-1.html

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

hrs2019 — Tue, 28 Apr 2020 05:28:59 GMT

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

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

DavidHourani — Tue, 28 Apr 2020 05:47:50 GMT

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

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

hrs2019 — Tue, 28 Apr 2020 06:08:36 GMT

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>

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

DavidHourani — Tue, 28 Apr 2020 06:11:59 GMT

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.

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

hrs2019 — Tue, 28 Apr 2020 06:17:03 GMT

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

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

DavidHourani — Tue, 28 Apr 2020 06:29:44 GMT

@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.

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

hrs2019 — Tue, 28 Apr 2020 06:42:41 GMT

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

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

DavidHourani — Tue, 28 Apr 2020 06:44:28 GMT

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 🙂

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

hrs2019 — Tue, 28 Apr 2020 06:54:30 GMT

Thanks @DavidHourani there is no other way right ?