Hello:
I've been having issues with mobile rendering of subelements like checkboxes. In F 3.3.2, the layout is set in the 'alist' function starting at line 782 in components/com_fabrik/helpers/html.php.
Lines 788-92:
if ($options_per_row > 1)
{
$percentageWidth = floor(floatval(100) / $options_per_row) - 2;
$div = "<div class=\"fabrik_subelement\" style=\"float:left;width:" . $percentageWidth . "%\">\n";
}
This works fine for full-screen - if you set the options per row for your checkboxes at 4, then each label/input pair floats at just under 25%.
On mobile - not so good (for obvious reasons - width is not responsive).
I popped in a new variable that converts the 'options per row' to a Bootstrap integer and changed those lines to the following:
if ($options_per_row > 1)
{
$percentageWidth = floor(floatval(100) / $options_per_row) - 2;
$bootcalc = (12 / $options_per_row);
$div = "<div class=\"fabrik_subelement col-md-". $bootcalc ." \">\n";
}
Now this is perfect - the label-input pair converts to 100% width on smartphones, etc.
Caveats:
1. We all know that revising a core file is a cardinal sin - God probably kills a kitten every time we do this.
In this case, it's a minor revision of the presentation layer, so I can live with that (I kept the $percentageWidth in case it gets used downstream). It would be lovely to see this layout object outsourced to its own template file for an override that removes the inline style (hate those).
2. My templates run Bootstrap 3, hence the 'col-md-$' syntax versus 'span$' (Bootstrap 2). Retrofitting my css universe to run Bootstrap 2 side-by-side is bit awkward - I would be curious to get the view from 30,000 feet on what a full-scale conversion of Fabrik to Bootstrap 3 would entail.
Cheers!
Alan
I've been having issues with mobile rendering of subelements like checkboxes. In F 3.3.2, the layout is set in the 'alist' function starting at line 782 in components/com_fabrik/helpers/html.php.
Lines 788-92:
if ($options_per_row > 1)
{
$percentageWidth = floor(floatval(100) / $options_per_row) - 2;
$div = "<div class=\"fabrik_subelement\" style=\"float:left;width:" . $percentageWidth . "%\">\n";
}
This works fine for full-screen - if you set the options per row for your checkboxes at 4, then each label/input pair floats at just under 25%.
On mobile - not so good (for obvious reasons - width is not responsive).
I popped in a new variable that converts the 'options per row' to a Bootstrap integer and changed those lines to the following:
if ($options_per_row > 1)
{
$percentageWidth = floor(floatval(100) / $options_per_row) - 2;
$bootcalc = (12 / $options_per_row);
$div = "<div class=\"fabrik_subelement col-md-". $bootcalc ." \">\n";
}
Now this is perfect - the label-input pair converts to 100% width on smartphones, etc.
Caveats:
1. We all know that revising a core file is a cardinal sin - God probably kills a kitten every time we do this.
In this case, it's a minor revision of the presentation layer, so I can live with that (I kept the $percentageWidth in case it gets used downstream). It would be lovely to see this layout object outsourced to its own template file for an override that removes the inline style (hate those).
2. My templates run Bootstrap 3, hence the 'col-md-$' syntax versus 'span$' (Bootstrap 2). Retrofitting my css universe to run Bootstrap 2 side-by-side is bit awkward - I would be curious to get the view from 30,000 feet on what a full-scale conversion of Fabrik to Bootstrap 3 would entail.
Cheers!
Alan