Request: option to hide empty elements in details view

[zofx]

Hi,

I'd like to hide empty elements in my details view. This is basically easyily achieved with css, as empty elements have the class "fabrikDataEmpty". Now there is one problem: our list is striped (i.e. every 2nd row has a gray background). Now when only certain rows are hidden using css, they are still considered childs for css, thus there may be two gray or white rows following each other, which isn't neat ...

To solve this it would be great to have an option to hide rows with empty elements completely in the details view. I'm of course also open to different solutions .

Thanks and kind regards

 

[rob]

Hi
A quick solution would be to write a custom template (which I guess you might already have if your details view rows are striped?)
Each details view template has a default_group.php file, which loops over its elements, rendering them one after the other. You could add an if statement in there to check if the element is empty and if it is then skip rendering it:

if (!strstr($element->containerClass, 'fabrikDataEmpty'))
    {
        if ($labels_above == 1)
        {
            echo $this->loadTemplate('group_labels_above');
        }
        elseif ($labels_above == 2)
        {
            echo $this->loadTemplate('group_labels_none');
        }
        elseif ($element->span == 'span12' || $element->span == '' || $labels_above == 0)
        {
            echo $this->loadTemplate('group_labels_side');
        }
        else
        {
            // Multi columns - best to use simplified layout with labels above field
            echo $this->loadTemplate('group_labels_above');
        }
    }

 

[troester]

which I guess you might already have if your details view rows are striped?

HiRob, core details/bootstrap/default_group.php is doing
<div class="row-striped">
With empty elements set to hidden this is creating the effect described by @zofx...

 

[rob]

oups indeed my bad!
My solution however was to just not render those hidden elements, so the striping should be correct.

 

[zofx]

Thanks for your help! I extended your code as follows:

• extended the if statement to include the entire row (<div class="row-fluid" ...)
• replaced the strstr function with the more economical strpos function
• included the class "fabrikHide" in the if statement

Right now it looks as follows and basically works fine:

if (strpos($element->containerClass, 'fabrikDataEmpty') === false && strpos($element->containerClass, 'fabrikHide') === false) {

    if ($element->startRow) : ?>
            <div class="row-fluid <?php echo $single ? 'fabrikElementContainer' : ''; ?>" <?php echo $style?>><!-- start element row -->
    <?php
        $rowStarted = true;
    endif;
    $style = $element->hidden ? 'style="display:none"' : '';
    $labels_above = $element->dlabels;

    if ($labels_above == 1)
    {
        echo $this->loadTemplate('group_labels_above');
    }
    elseif ($labels_above == 2)
    {
        echo $this->loadTemplate('group_labels_none');
    }
    elseif ($element->span == 'span12' || $element->span == '' || $labels_above == 0)
    {
        echo $this->loadTemplate('group_labels_side');
    }
    else
    {
        // Multi columns - best to use simplified layout with labels above field
        echo $this->loadTemplate('group_labels_above');
    }

    if ($element->endRow) :?>
        </div><!-- end row-fluid -->
    <?php
        $rowStarted = false;
    endif;
}

The only problem left right now is the ajax spinner (which isn't even used in my frontend details view) being injected in between the rows and disturbing the striping. The following firebug extract only shows part of the code, but everything needed to understand:

<div class="row-fluid fabrikElementContainer">
<div class="row-fluid fabrikElementContainer">
<div id="spinner-if404c9h" class="spinner" style="display: none;">
<div class="row-fluid fabrikElementContainer">
<div class="row-fluid fabrikElementContainer">

 

[rob]

hi Could you figure out which element is injecting that?
To do so, just go through unpublishing each element until the spinner div is removed? At a guess it will be something like a database join, or cascading dropdown element