Tip : Horizontal and Vertical Scroll bar for table component when there are more rows and/or columns to show in Pentaho CDE

Hi Guys,

I'd like to share what I have worked on today(2nd July 2014) on table component in pentaho CDE that this will be very useful for other community folks...

Thank you pentaho forum to letting know horizontal scroll bar for table component if there are more number of columns to show on dashboard.

CSS Syntax:
.<YourHTMLObject>
{
overflow:auto;
}
Example:
    <div class="col-md-6">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">Horizontal And Vertical Demo</h3>
                  </div>
                  <div class="panel-body" id="Panel1">
                         Panel content
                  </div>
              </div>
</div>
 
.panel-body{
   height:400px;
   overflow:auto;
}

Providing height in pixels will give you the vertical scroll bar. 

Benefit of the Tip : If you are developing Mobile dashboards using Bootstrap CSS this tip will be very useful.
Sample output image:
Desktop View:

Mobile View:

Browser is resized like Mobile... Should work in Mobile too..

NOTE:
Table component is placed inside panel-body. i.e, class name(panel-body) is the htmlObject for table component and where ever you write panel-body in HTML pages and where ever you use table component the horizontal scroll bar will come if the table component have more number of columns to show.

NOTE: for class css use .(dot), for id css use #(ash symbol)
Reference:
http://forums.pentaho.com/showthread.php?140282-Table-Component-SubColumns