Hiding empty fields in details view

[droogers]

Hello,

In my detail form I want to hide empty fields.
How can I do this ?
I am using Fabrik 3.9.2

 

[troester]

http://fabrikar.com/forums/index.php?threads/hide-field-in-details-view-if-empty.48827/

 

[droogers]

Thanks. But I don't understand it. I don't know much about CSS.
I was looking on the element -> List view settings -> Tab CSS
What code do I have to fill in and on what rule ? There are 4 possibilities.

 

[troester]

List view settings are for lists, not detail views.

http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates
https://fabrikar.com/forums/index.php?wiki/css-styling-examples-fabrik3-3

 

[droogers]

Oke. But where do I have to place the code: #$form .fabrikDataEmpty {display:none;}

 

[lousyfool]

Assuming that you are using Fabrik's default Bootstrap template:

1. Locate the file /components/com_fabrik/views/details/tmpl/bootstrap/custom_css_example.php
As the name implies, it's an example which you can modify and use for your case.

2. Rename the file to custom_css.php

3. Open it with a UTF-8 compatible text or code editor.

4. Find the lines

#$form .foobar {
    display: none;
}

and replace the word "foobar" with "fabrikDataEmpty", so it reads

#$form .fabrikDataEmpty {
    display: none;
}

5. Save and close the file. Empty elements should now be hidden in details views.

 

[droogers]

Unfortunaly it didn't work. Here you see the code at the file custom_css.php

<?php
/**
* Default Form Template: Custom CSS
*
* @package     Joomla
* @subpackage  Fabrik
* @copyright   Copyright (C) 2005-2020  Media A-Team, Inc. - 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:
*
* 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 <<<EOT

/* BEGIN - Your CSS styling starts here */

#$form .fabrikDataEmpty {
    display: none;
}

/* END - Your CSS styling ends here */

EOT;

 

[lousyfool]

Hmm... you could try to add an "!important", so it reads

    display: none !important;

If that doesn't work and you can't help yourself with inspecting/simulating the code in your browser console, then posting a link to a details page with empty elements should do.

 

[droogers]

I filled in !important but this also doesn't help.
Here you can find my details page.

 

[troester]

As in the WIKI

Use your browser console to get the CSS classes, HTML ids etc. you need.

Your elements don't have the class .fabrikDataEmpty
Your element "Info" is not empty (it contains <p> etc)
Your elements "...Collecte " are databasejoins which don't get fabrikDataEmpty added (I don't know why).

 

[lousyfool]

Additionally:

Well, there's one element (tblcollecten___ID, before the one with label "Collecte") that has the class .fabrikDataEmpty, and indeed the custom CSS is working -- at least right now while I'm looking at it.

I guess a workaround for dbjoins missing the class for whatever reason (e.g. tblcollecterooster___collecte3), a workaround could be some Javascript hiding it if the element div is empty...