Solved: Re: How I can resize the table length so that the ...

hrs2019 · ‎04-27-2020

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>

DavidHourani · ‎04-27-2020

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

DavidHourani · ‎04-27-2020

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

hrs2019 · ‎04-27-2020

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>

DavidHourani · ‎04-27-2020

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.

hrs2019 · ‎04-27-2020

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

DavidHourani · ‎04-27-2020

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

hrs2019 · ‎04-27-2020

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

DavidHourani · ‎04-27-2020

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 🙂

hrs2019 · ‎04-27-2020

Thanks @DavidHourani there is no other way right ?

chaitanya1996 · ‎04-27-2020

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.

hrs2019 · ‎04-27-2020

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

chaitanya1996 · ‎04-27-2020

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

hrs2019 · ‎04-27-2020

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

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

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor

Introducing the 2024 SplunkTrust!