Edit: see the Update below for the current status of the problem.
I have a module that has to display a variable number of rows, based on how the user configures it in the back-end, and several instances of the module need to be displayed on the same page (with potentially different numbers of rows). My approach is to use a grid layout. The main challenge is styling it so the rows appear at the bottom of the div rather than the top, in a way that can be applied to all instances at once. My first attempt was to pass the number of rows to my CSS in the form of a CSS variable, as well as the padding. This is roughly what my code looked like:
$document = JFactory::getDocument();
$modulePath = JURI::base() . 'modules/mod_my_module/';
$document->addScript($modulePath.'media/script.js');
$document->addStyleSheet($modulePath.'media/stylesheet.css');
...
$rows_array = $params->get("rows");
$number_of_divs = count($rows_array);
$padding = 100 - (10 * $number_of_divs);
$style = ":root { --rowNum: " . $number_of_divs . "; --padding: " . $padding . "%;}";
$document->addStyleDeclaration($style);
Then in my CSS I'm using these variables in a grid layout, like
...
display: grid;
grid-template-rows: var(--padding) repeat(var(--rowNum), 10%);
...
When I have a single instance of my module this works fine, but if I have several instances rendered in the same page then these variable declarations collide and it doesn't work anymore. I think the issue is that $document->addStyleDeclaration($style);
is applying the style rule to a global style-sheet, but I need to do something that only affects the style of the particular instance.
How can I style the different instances of the module with different numbers of rows? Should I be dynamically adding the rows using Javascript instead?
Update: I've also tried an approach that doesn't use CSS variables, by adding unique ids to the divs I'm trying to style by fetching their module ids, like id="my-module-<?php echo $module->id ?>"
. Then instead of having the grid style rules in my style.css file I add the php
$style =
"#my-module-" . $module->id . "{ " .
"display: grid; " .
"grid-template-rows: " . $padding . "% repeat(" . $number_of_divs . ", 10%); " .
"grid-template-columns: 60% 40%; " .
"justify-content: end;" .
"}";
$document->addStyleDeclaration($style);
Now the problem is that this works for the first module rendered, but not the second. I have no clue why. I've inspected the containers and they have the right ids, I've also tried moving this code from my_module.php to default.php to see if it made a difference and it doesn't.
Why is it adding the style declaration and using the right styling for the first rendered instance but not the second?