Adjusting responsive pattern "Fixed Left Header + Scroll" for higher resolutions

In this article we will discuss how to change the response breakpoint and other parameters of the responsive pattern "Fixed Left Header + Scroll" in order to kick in larger resolutions (desktops or tablets with a higher screen resolution).

Step 1

Edit the following CSS file:

{joomla root directory}/components/com_tabulizer/assets/css/responsive/responsive-fixed-scroll.css


{wordpress root directory}/wp-content/plugins/tabulizer/site/assets/css/responsive/responsive-fixed-scroll.css

Find and replace 1024px with 3024px (or any other value).

Step 2

Edit the ruleset's CSS file and add the following statements at the end of the file:

@media only screen and (max-width: 3024px) {            
   div.table-wrapper div.pinned { width: 100px !important; }        
   div.table-wrapper div.scrollable { margin-left: 100px !important; }

This will effectively set the width of the left-most fixed column to the desired value (in this example 100 pixels). The default width is 35% of the total table width.

Step 3

Edit the following CSS file:

{joomla root directory}/components/com_tabulizer/assets/js/responsive/responsive-fixed-scroll.js


{wordpress root directory}/wp-content/plugins/tabulizer/site/assets/js/responsive/responsive-fixed-scroll.js

Find and replace 1023 with 3023 (or any other value).