Notice: ABPro's Stripe payment processor uses the Legacy Checkout and is not SCA compatible. read more..

  • Home
  • How-To
  • Display multi-resource grid in mobile device

How-To

Display multi-resource grid in mobile device


ABPro lets you create many resources.
The more resources, the more difficult it is to display all their timeslots in a small device screen.
By default ABPro shows one resource at a time in the mobile view - this will always work.

If you want to show more than one resource, this how-to will explain a couple of simple code changes to allow that.

Note: this will only work if you have a maximum of 3 or 4 resources showing, otherwise the columns of timeslots become too small to be useful.

 

Normal Multi-Resource

 

This modification requires two code changes.

Change 1

Edit file: \components\com_rsappt_pro3\script.js

Around line 1235 look for, add add red // to comment out as shown..

// if((document.getElementById("resources") != null && document.getElementById("resources").selectedIndex == 0 && !show_grid_for_single_resource_mobile)
//       && document.getElementById("mobile") != null){
//       document.getElementById("gad_container").style.visibility = "hidden";
//       document.getElementById("gad_container").style.display = "none";
//       document.getElementById("table_here").style.visibility = "hidden";
//       document.getElementById("table_here").style.display = "none";
//  } else {
        document.getElementById("gad_container").style.visibility = "visible";
        document.getElementById("gad_container").style.display = "";
        document.getElementById("table_here").style.visibility = "visible";
        document.getElementById("table_here").style.display = "";
//  }

 

Change 2

As the area of the screen containing the slots gets wider, to accommodate more columns, the date on the left of the header row will likely wrap onto multiple rows, causing the grid to be out of alignment with the time legend. To work around this you can increase the header row height.

Edit file: \components\com_rsappt_pro3\gad_ajax2.php

Around line 142 look for:

$rowheight_header = 50;

Change the height as required for your template and date format.

 

That's it.