[SOLVED] fabrikform id in CSS now appending rowid e.g. details_formid_rowid

[Suzzi]

I've updated to Joomla 3.2 and Fabrik 3.1 (This was also happening in Fabrik 3.1rc2)

None of my custom form CSS is being invoked, as it expects to be used with the prefix #details_c where c is the form number. Instead after the upgrade a rowid has been added so it has to use #details_c_rowid in order to work.

Here's the original line on pre-upgraded website page http://www.hiberniantrainingcourses...n-the-trainer/train-the-trainer-fetac-level-6 when I inspect using firebug:
<div class="fabrikForm fabrikDetails" id="details_11">

But after the upgrade the page http://www.tuskar.com.au/htcj3d/index.php/courses/train-the-trainer/train-the-trainer-fetac-level-6 is showing both the form id and row id in that order:
<div class="fabrikForm fabrikDetails" id="details_11_3">

My new custom css is the same as in the example css. I've proven that it is picking up my custom css by using some direct css without the form id. I've made sure the menu item and the form are all looking at the same custom css file. I just copied the bootstrap template and rename the custom example file and am using that.

I can do a workaround, which I'll put the additional code here in case anyone needs it. But surely I'm not the only person to have this issue after upgrading to 3.1rc2??
$rowid = (int) $_REQUEST['rowid'];
$test = $c . "_" . $rowid ;
#{view}_$test .foobar {...etc}

 

[troester]

Yes, the code has changed and /details/xxx/custom_css_example.php seems not to be updated (it's updated in /form/bootstrap).

I've updated the files in GitHub.

 

[sdavies68]

Sorry to reopen this, but I am having the exact sample problem but cannot find which file I have to fix and what I put into the file

I have updated

templates/xxxxx/html/com_fabrik/form/bootstrap/ template_css.php

to include this

header('Content-type: text/css');
$c = (int) $_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
$rowid = isset($_REQUEST['rowid']) ? $_REQUEST['rowid'] : '';
$form = $view . '_' . $c;
if ($rowid !== '')
{
$form .= '_' . $rowid;
}
echo "

 

[troester]

You shouldn't modify template_css.php, it's a Fabrik core file and will be overridden with the next update.
Rename or copy custom_css_example.php (it does include the rowid) to custom_css.php and put your CSS there.

 

[sdavies68]

Thanks troester

So do I need one for [joomla root]/templates/[mytemplate]/html/com_fabrik/form/bootstrap/custom_css.php as well as

[joomla root]/templates/[mytemplate]/html/com_fabrik/details/bootstrap/custom_css.php

I have tried both, and the problem still occurs. When adding a record its fine, on a editing a record its wrong.

 

[sdavies68]

Or is it this file that I update?

[joomla root]/components/com_fabrik/views/details/tmpl/bootstrap/custom_css.php

 

[sdavies68]

OK, I have created

[joomla root]/templates/[mytemplate]/html/com_fabrik/details/bootstrap/custom_css.php

and it has

header('Content-type: text/css');
$c = (int) $_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
$rowid = isset($_REQUEST['rowid']) ? $_REQUEST['rowid'] : '';
$form = $view . '_' . $c;
if ($rowid !== '')
{
$form .= '_' . $rowid;
}

But I still have the same problem. When I add a new row I can see in google debug console its pointing to the custom_css.php

When I edit an existing row, there is not use of custom_css.php (or any css.php) and it just uses template.css from my template.

What am I doing wrong.

 

[troester]

You don't need to use template override, just use
[joomla root]/components/com_fabrik/views/details/tmpl/bootstrap/custom_css.php for the details view (read-only view) and
[joomla root]/components/com_fabrik/views/form/tmpl/bootstrap/custom_css.php for the form view (add and edit)

Which exact Joomla/Fabrik versions are your running?
Do you have a link?
As a pro member better post in the pro forum to get the support you've paid for.

 

[sdavies68]

running J3.4.3 and I downloaded the latest fabrik update this afternoon.

So if I use [joomla root]/components/com_fabrik/views/form/tmpl/bootstrap/custom_css.php for the form view for Add and Edit,

why does the Add display it correctly but the Edit does not?

Thanks Troester.

 

[sdavies68]

This is my custom_css.php in the form bootstrap

<?php
/**
* Default Form Template: Custom CSS
*
* @package Joomla
* @subpackage Fabrik
* @copyright Copyright (C) 2005-2013 fabrikar.com - All rights reserved.
* @license GNU/GPL http://www.gnu.org/copyleft/gpl.html
* @since 3.0
*/

/**
* If you need to make small adjustments or additions to the CSS for a Fabrik
* template, you can create a custom_css.php file, which will be loaded after
* the main template_css.php for the template.
*
* This file will be invoked as a PHP file, so the view type and form ID
* can be used in order to narrow the scope of any style changes. You do
* this by prepending #{$view}_$c to any selectors you use. This will become
* (say) #form_12, or #details_11, which will be the HTML ID of your form
* on the page.
*
* See examples below, which you should remove if you copy this file.
*
* Don't edit anything outside of the BEGIN and END comments.
*
* For more on custom CSS, see the Wiki at:
*requirejs(['fab/fabrik'], function () {
var form = Fabrik.getBlock('form_1', false, function (block) {

var fieldNames = ['element_test___list', 'element_test___test'];
var fields = [];
for (var i = 0; i < fieldNames.length; i ++) {
fields.push(block.elements.get(fieldNames));
}

var rad = block.elements.get('element_test___rad');

console.log(rad.get('value'));

if (rad.get('value') == 0) {
toggle(fields, false);
}
rad.addEvent('click', function () {
state = rad.get('value') == 0 ? false : true;
toggle(fields, state);
});

});
});

var toggle = function (fields, show) {
for (var i = 0; i < fields.length; i ++) {
if (show) {
fields.show();
} else {
fields.hide();
}
}
}
* http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/#the-custom-css-file
*
* NOTE - for backward compatibility with Fabrik 2.1, and in case you
* just prefer a simpler CSS file, without the added PHP parsing that
* allows you to be be more specific in your selectors, we will also include
* a custom.css we find in the same location as this file.
*
*/

header('Content-type: text/css');
$c = (int) $_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
$rowid = isset($_REQUEST['rowid']) ? $_REQUEST['rowid'] : '';
$form = $view . '_' . $c;
if ($rowid !== '')
{
$form .= '_' . $rowid;
}
echo "

/* BEGIN - Your CSS styling starts here */

.row-fluid
{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:11px;
}
.art-postcontent p
{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:11px;
text-align:justify;
}
.fabrikForm.fabrikDetails .row-fluid
{
float: left;
width: 100%;

}
.row-fluid .fabrikElementContainer .controls {
//width: 70%;
float:left;
}
h1 {
color: #000000;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size: 22px;
font-weight: bold;
}

.fabrikElementContainer .fabrikLabel {
float: left;
width: 160px;
}

.fabrikElementContainer.plg-field .span8 {
float: left;
width: 25%;
}
.fabrikElementContainer
{
float: left;
width: 48%;
}
.control-group.fabrikElementContainer.plg-databasejoin {
float: left;
width: 48% !important;
}
.inner.clearfix > p {
padding-left: 8px !important;
width: auto;
}
.page-header {
padding-left: 8px !important;
}
.form-horizontal .controls
{
margin-left:0px !important;
}

.fabrikGroup {
clear: left;
}

#{$view}_$c
{
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
}

#{$view}_$c fieldset {
border: 1px solid #ddd;
border-radius: 5px;
margin: 4px;
padding: 22px;
}

#{$view}_$c .fabrikActions.form-actions {
border: 1px solid #ddd;
border-radius: 6px;
margin: 4px;
}
";
?>
/* END - Your CSS styling ends here */

 

[sdavies68]

If I remove [joomla root]/templates/[mytemplate]/html/com_fabrik/form/bootstrap/custom_css.php

All formatting goes for both edit and add