Akeeba, Admin Tools, JCE, MediaBox, Sigplus, TDOC FB Display, TDOC Google KML Map, Articles Anywhere.

Create a grid table

Introduction

I first created a table 3 cols wide .... as here: http://tdocplus.co.uk/wp/about-cemdc 

April 2023 - Some excellent news: JCE now displays grids ! But when will we able to add them ?

The next step was to replace all the tables with grids, now successfully done, and the to start formatting as needed.... and one almost immediately realises that grids are really so much better than tables. The BIG question is when is a Joomla Article Editor going to be able to achieve this ? There are editors out there ... but not yet for Joomla apparently. An on line editor: https://grid.layoutit.com/

There are a number of web sites which explain what grids are all about - I tend to use:

 

There are a number of things to be thought about:

  • Configuring the "look" of the grid to have a uniform standard on a web site.
  • Handling the "Read More" - it cannot be inserted into a <div> without causing havoc elsewhere - e.g. Blog layouts.
  • Inserting a line - join all the "grid items in a row" - and insert a line.
  • In the left column, joining cells vertically in order to make a sub group of a few rows 
  • Making an "area" e.g. in representing a diagram.
  • Fixing the left column so that it does not scroll out of view.
  • Some notes  ....

Sample table - 3 columns with: Read More, and Horizontal Line

Title
Brief Conclusion
Content Summary
Project Overview
That each party must keep their own records, and manage their own communications, and use the internet (world wide web) for communication.
NB The readmore is after this grid row.
Demonstrates the need for effective Document Control on any project of any type of size throughout the life of the project from its inception to management of the facility.
Specification of Require-ments for CEMDC
That the specific needs of the Construction & Building Industries including AEC consultants can only be met by a CEMDC application - much as an accounting system is needed for accounts.
A simple specification of data structure, with descriptions of major process's, and a list of standard field sizes.
NB. The line below is within a grid item that spans the whole grid. 
row - col 1
row - col 2
row - col 3

This comment is after the end of the second grid.

Note: the wrapping of text in narrow columns is achieved by using a "-".
Next Note: a line is simply put in a grid item which spans right across. 
Padding and spacing can be set when there is a line.

The html code is typically:
<div class="table_3x">
<div class="grid_item">row - col 1</div>
<div class="grid_item">row - col 2</div>
<div class="grid_item">row - col 3</div>
</div> 

NOTA BENE: If the readmore is within a div, it upsets for example the category blog layout. The solution is to split the grid into two. BUT then you have to make a space between them to emulate the border. Just add margin-bottom: 7px;

When adding item lists be very careful in the Editor - the Code is much easier to get right first time !
<div class="grid_item">
<ul>
<li>xxx</li>
<li>yyy</li>
<li>zzz</li>
</ul>
</div>

And here is the css

/* set up a table 3 cols wide */
.table_3x {
  display: grid;
  grid-template-columns: 110px 2fr 2fr;
  grid-column-gap: 7px;
  grid-row-gap: 7px;
}

/* format grid item */
.grid_item {
  border: 2px solid #87b5ff;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
}

Creating a line within a grid

The HTML code is 

<div class="spacer_item"><hr class="grid_line" /></div>

This appears to visually split a single grid into two separate grids.

The associated css is:

/* space for line - works for any number of columns - readmore must be BETWEEN two grids */
.spacer_item {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* format line for grid */
hr.grid_line {
  height: 2px !important;
  border: 0px !important;
  color: #87b5ff !important;
  opacity:1.0 !important;
  margin: 0 !important;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

Spans and Areas

If one wants an item to span two columns for example, then one needs this sort of thing.
/* span last 3 columns in a 4 column grid */
.grid_item_4 {
grid-column-start: 2;
grid-column-end: 5;
}
The class call is:
<div class="grid_item grid_item_4">col 2 to col 4</div>

Areas are better when spanning rows AND columns.- an example here:

/* set the tdoc area - grid-row-start / grid-column-start / grid-row-end / grid-column-end.*/
.grid_item_tdoc {
grid-area: 2 / 2 / 4 / 3 ;
background-color: green;
border: 2px solid green !important;
}

Fixing the leftmost column

Firts one must thank Pavel for the code. Please see the forum link here:
https://forum.joomla.org/viewtopic.php?p=3651232

Basically what one has to do is: 
  • Add a separate class for the table. For example "table_icky". 
  • Add a separate class for all the cells in the left column. For example "lefticky"
    Nota Bene. The code setting the background color does more than just re-iterate the default, it "fills the cell" so that the cell always shows, and the scrolling commences on the adjacent column - if one leaves it out the left most [index] column gets covered over.
The html code is in in two parts as well: 

Note the order of cascading.

<div class="table_7x table_bm table_icky">
<div class="grid_item lefticky"><strong>A heading</strong></div>
 
The css required is:

@media (max-width: 767px) {
   .table_icky {
      overflow-x: scroll;
   }
   .lefticky {
     position: sticky;
     left: 0;
     background-color: #fff;
     z-index: 2;
   }
}
 

Some Notes on Cascading [NOT subclassing]

Be careful of two things:

  • The order of the classes is what determines which css statement is given priority.
  • The order of the classes, irrespective of the order of calling, is set by the order in which they are listed in user.css
  • Thus a call like this <div class="table_3x table_3y">???</div> will use the css rule from table_3y in preference to table_3x as long as in the user.css file .table_3y is AFTER .table_3x.
  • In order to make sure that the css statement you need has priority it can be flagged "!important".

 Note: How to View Grid lines

  • Right Click, Inspect
  • In right side, select Layout
  • Set Grid Overlays ON for each as needed.

Note: BEWARE Google Chrome and Cache ... set caching off as follows:

  • Right Click, Inspect
  • Select Network Tab
  • Click on Disable Cache to Disable caching - box ticked.

It appears that when a new class is defined in user.css, then the cache kicks in. If it is just modified, then there is not a problem, nor is  there when updating an article.

However, this does not work properly ... CCleaner.com does work - but Chrome has to be closed ...