Design breaking after search or filtering

componentegd

New Member
Hello! I'm a new user of Fabrik and I'm kinda learning it yet. Although I have already made a new system and created a template to display a list.
I managed to display that list well without any touch from the user, but as soon as you use the Search box or any filter the design of the data is changing, so all the changes i've made in the files are not being used.

So first of all, this is the link of it, if you could check it: https://barracorporate.fator3.com/empresas/list/1

Second, is there a way to change or limit the options in the filter? Like, all those options are not needed, I just need to leave one or two options max.

And I tried to understand what happens when you use the search box or the filter, but so far no clue. Can anyone give me a light? Or even so help me, please.

Thanks in advance!
 
Second, is there a way to change or limit the options in the filter
I assume you don't mean filter but group by.
https://fabrikar.com/forums/index.php?threads/disable-group-by-in-list-view.22771/post-274226

If you want to filter you can enable filtering for the elements you need:
In element setting enable the list filter https://fabrikar.com/forums/index.php?wiki/elements/#list-view-settings-tab-8203
https://fabrikar.com/forums/index.php?wiki/list-filters/In list settings enable the filter block
 
I assume you don't mean filter but group by.
https://fabrikar.com/forums/index.php?threads/disable-group-by-in-list-view.22771/post-274226

If you want to filter you can enable filtering for the elements you need:
In element setting enable the list filter https://fabrikar.com/forums/index.php?wiki/elements/#list-view-settings-tab-8203
https://fabrikar.com/forums/index.php?wiki/list-filters/In list settings enable the filter block
Hi! Thanks for answering.
Yes, you're right. I mean group by. I managed to upgrade it by now understanding it better.

But I still have the major problem, which is when the user search for anything the design breaks.

Can you give me a hint for where do I need to look? I altered the default_row.php, so when you load the page you'll see the design perfectly as I wanted it to show. But as soon as you search for anything the design breaks. What happens when you search something? Why does it breaks?
 
Hi there!
I checked your link, and I'm not sure I see your broken design. I can search for one of the entries in the main lis,t and it shows up fine as a single line with all the categories below. When I empty the search box I get back to the full list. Can you be more specific?

Anyway, having done some template changes myself, here is a hint: I ran into trouble with <div> tags that were not properly closed. Especially when there are a number of if statements that echo more <div>..</div> blocks, you can easily lose track of how many div tags are still open.

Kindly,
Lorenz
 
Hi there!
I checked your link, and I'm not sure I see your broken design. I can search for one of the entries in the main lis,t and it shows up fine as a single line with all the categories below. When I empty the search box I get back to the full list. Can you be more specific?

Anyway, having done some template changes myself, here is a hint: I ran into trouble with <div> tags that were not properly closed. Especially when there are a number of if statements that echo more <div>..</div> blocks, you can easily lose track of how many div tags are still open.

Kindly,
Lorenz
Thanks for answering!
I attached a printscreen of the design breaking I've said.
Like you can notice, the icons in the texts is missing and the icons from site and social media are including the text aswell. If hasn't happened to you I'm confused hehe

Like I said above, I did change some files to adapt it to this need, but as soon as using the search box it seems that is using other files than the ones I edited.

Once again, if you guys have a clue of what can be causing this, I would love some guidance.
 

Attachments

  • error.PNG
    error.PNG
    113.2 KB · Views: 34
Hi there!
I checked your link, and I'm not sure I see your broken design. I can search for one of the entries in the main lis,t and it shows up fine as a single line with all the categories below. When I empty the search box I get back to the full list. Can you be more specific?

Anyway, having done some template changes myself, here is a hint: I ran into trouble with <div> tags that were not properly closed. Especially when there are a number of if statements that echo more <div>..</div> blocks, you can easily lose track of how many div tags are still open.

Kindly,
Lorenz
And of course, I will double check the div situations you mentioned.
I did check if there was opened divs but didn't see any of them opened. But since it is showing some bugs, it could be happening. Thanks for this clue.
 
Like you can notice, the icons in the texts is missing and the icons from site and social media are including the text aswell.
After a search on your site (search term maxima) I realized, not only additional link text is showing, the link is even different for the icon and the text:
1708712784731.png

Seems you are doing strange stuff with your template override.
( I know, this post is no help.....)
 
After a search on your site (search term maxima) I realized, not only additional link text is showing, the link is even different for the icon and the text:
View attachment 21224
Seems you are doing strange stuff with your template override.
( I know, this post is no help.....)
Hi! Of course this is helpful. You just discovered one more bug for me to solve hahahahaha
Since I'm not a programmer, its easier to make more mistakes.

Thanks for looking!
 
Hi

I have/had the same issue in a Fabrik list menu.

I "solved" this doing a custom template and linking this template to my list in Fabrik admin and in Joomla admin (if you have a usual Fabrik menu in Joomla to display your list, it has an template option). Then deleting cache.
And maybe setting a hard link for the "empty filter button", dont remember.

But still the issue in Fabrik list module. So yes I think it is an issue.

Joomla 4 - Fabrik 4
 
Hi

I have/had the same issue in a Fabrik list menu.

I "solved" this doing a custom template and linking this template to my list in Fabrik admin and in Joomla admin (if you have a usual Fabrik menu in Joomla to display your list, it has an template option). Then deleting cache.
And maybe setting a hard link for the "empty filter button", dont remember.

But still the issue in Fabrik list module. So yes I think it is an issue.

Joomla 4 - Fabrik 4
Hi! Thanks for answering!
Yes, I made a custom template for this list. I didn't set it to the admin template. Would it be causing it?

About the hard link thing, what do you mean? I don't know what to do.
 
I do not mean "the admin template", I mean the Joomla module options, see attached screenshots.
But I repeat, still the issue in Fabrik list module. So I think it is a true issue.

About the hard link thing: it is not related, please forgot this.
 

Attachments

  • 2.png
    2.png
    56.5 KB · Views: 31
  • 1.png
    1.png
    32 KB · Views: 28
Seems like I'm stuck =(
So, I will put here the template files I created. So if you guys find anything to adjust feel free to tell me, please.
Keep in mind that I'm not a programmer, everything I did is just the basic of the basics hahahaha

default.php
PHP:
<?php
/**
 * Fabrik List Template: Div
 *
 * @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
 */

// No direct access
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Language\Text;

// The number of columns to split the list rows into
$columns = 1;

// Show the labels next to the data:
$this->showLabels = false;

// Show empty data
$this->showEmpty = true;


$pageClass = $this->params->get('pageclass_sfx', '');

if ($pageClass !== '') :
    echo '<div class="' . $pageClass . '">';
endif;

?>
<?php if ($this->tablePicker != '') { ?>
    <div style="text-align:right"><?php echo Text::_('COM_FABRIK_LIST') ?>: <?php echo $this->tablePicker; ?></div>
<?php }

if ($this->params->get('show_page_heading')) :
    echo '<h1>' . $this->params->get('page_heading') . '</h1>';
endif;

if ($this->showTitle == 1) { ?>
    <h1><?php echo $this->table->label;?></h1>
<?php }?>

<?php echo $this->table->intro;?>
<form class="fabrikForm col-12 col-xl-12" action="<?php echo $this->table->action;?>" method="post" id="<?php echo $this->formid;?>" name="fabrikList">

<?php
if ($this->hasButtons):
    echo $this->loadTemplate('buttons');
endif;

if ($this->showFilters) {
    echo $this->layoutFilters();
}
?>

<div class="fabrikDataContainer col-12 col-xl-8" data-cols="<?php echo $columns;?>">

<?php foreach ($this->pluginBeforeList as $c) {
    echo $c;
}?>
<div class="fabrikList <?php echo $this->list->class;?>" id="list_<?php echo $this->table->renderid;?>" >

    <?php
    $gCounter = 0;
    foreach ($this->rows as $groupedBy => $group) :?>
    <?php
    if ($this->isGrouped) :
        $imgProps = array('alt' => Text::_('COM_FABRIK_TOGGLE'), 'data-role' => 'toggle', 'data-expand-icon' => 'fa fa-arrow-down', 'data-collapse-icon' => 'fa fa-arrow-right');
    ?>
    <div class="fabrik_groupheading">
        <?php echo $this->layoutGroupHeading($groupedBy, $group); ?>
    </div>
    <?php
    endif;
    ?>
    <div class="fabrik_groupdata">
        <div class="groupDataMsg">
            <div class="emptyDataMessage" style="<?php echo $this->emptyStyle?>">
                <?php echo $this->emptyDataMessage; ?>
            </div>
        </div>

    <?php

    $items = array();
    
    foreach ($group as $this->_row) :
        $item = new stdClass;
        $item->rowdata = $this->loadTemplate('row');
        $item->spanId = $this->_row->id;
        $items[] = $item;
    endforeach;
    $class = 'fabrik_row ';
    echo FabrikHelperHTML::bootstrapGrid($items, $columns, $class, true, '');

    ?>
    </div>
    <?php
    endforeach;
?>

</div>
<?php
echo $this->nav;
print_r($this->hiddenFields);?>
</div>

</form>
<?php
echo $this->table->outro;

if ($pageClass !== '') :
    echo '</div>';
endif;
?>
 
default_row.php
PHP:
<?php
/**
 * Fabrik List Template: Div Row
 * Note the div cell container is now generated in the default template
 * in FabrikHelperHTML::bootstrapGrid();
 *
 * @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
 */

// No direct access
defined('_JEXEC') or die('Restricted access');

$rowClass = isset($this->_row->rowClass) ? $this->_row->rowClass : '';
$logo = 'empresas___logo';
$nome = 'empresas___nome_da_empresa';
$site = 'empresas___site';
$sala = 'empresas___bloco_sala';
$whatsapp = 'empresas___whatsapp';
$email = 'empresas___e_mail';
$instagram = 'empresas___instagram';
$facebook = 'empresas___facebook';
?>
<div class="fabrik_divrow <?php echo $rowClass; ?>" >
<?php foreach ($this->headings as $heading => $label) :
    $d = @$this->_row->data->$heading;

    $link = trim(strip_tags($d));
    
    //skip empty elements but don't skip the checkbox (delete, list plugins)
    if (isset($this->showEmpty) && $this->showEmpty === false && trim(strip_tags($d)) == '' && $heading != 'fabrik_select') :
        continue;
    endif;
    $h = $this->headingClass[$heading];
    $c = $this->cellClass[$heading];
    $hStyle = empty($h['style']) ? '' : 'style="' . $h['style'] . '"';
    $cStyle = empty($c['style']) ? '' : 'style="'. $c['style'].'"';
    ?>
    <?php
        if ($heading == $logo) {
    ?>
    <div class="coluna1 col-12 col-xl-3">
    <div class="fabrikDivElement logotipoteste">
        <?php if (isset($this->showLabels) && $this->showLabels && $heading != 'fabrik_select' && $heading != 'fabrik_actions') :
            echo '<span class="muted " ' . $hStyle . '>' . $label . ': </span>';
        endif; ?>

        <?php echo '<span class="' . $c['class'] . '" ' . $cStyle . '>' . $d . '</span>'; ?>
    </div>
    </div>
    <?php }?>
    <?php
        if ($heading == $nome) {
    ?>
    <div class="coluna2 col-12 col-xl-6">
    <div class="fabrikDivElement segundacoluna">
        <?php if (isset($this->showLabels) && $this->showLabels && $heading != 'fabrik_select' && $heading != 'fabrik_actions') :
            echo '<span class="muted " ' . $hStyle . '>' . $label . ': </span>';
        endif; ?>

        <?php echo '<span class="' . $c['class'] . '" ' . $cStyle . '>' . $d . '</span>'; ?>
    <?php }?>
    <?php
        if ($heading == $site) {
    ?>
    <div class="coluna3 col-12 col-xl-2">
    <div class="fabrikDivElement icones">
        <?php if (isset($this->showLabels) && $this->showLabels && $heading != 'fabrik_select' && $heading != 'fabrik_actions') :
            echo '<span class="muted " ' . $hStyle . '>' . $label . ': </span>';
        endif; ?>

        <?php echo '<a href="' . $link . '" target="_blank"><span class="' . $c['class'] . '" ' . $cStyle . '></span></a>'; ?>

    <?php }?>
    <?php
        if ($heading == $sala or $heading == $whatsapp or $heading == $instagram or $heading == $facebook or $heading == $email) {
    ?>
        <?php if (isset($this->showLabels) && $this->showLabels && $heading != 'fabrik_select' && $heading != 'fabrik_actions') :
            echo '<span class="muted " ' . $hStyle . '>' . $label . ': </span>';
        endif; ?>
        <?php if($heading == $instagram or $heading == $facebook){
        echo '<a href="' . $link . '" target="_blank"><span class="' . $c['class'] . '" ' . $cStyle . '></span></a>';
        }else{
        echo '<span class="' . $heading . '"><i class="'. $c['class'] .'"></i>' . $d . '</span>';}
        if ($heading == $email or $heading == $facebook){?>
        </div></div>
        <?php } }
        ?>
        <?php
        if ($heading != $logo and $heading != $nome and $heading != $sala and $heading != $whatsapp and $heading != $email and $heading != $site and $heading != $instagram and $heading != $facebook and $heading != "empresas___categoria") {
        if ($heading == "fabrik_select"){
        ?>
        <div class="coluna4 col-12 col-xl-1">
        <?php } ?>
        <div class="fabrikDivElement iconessistemicos">
            <?php if (isset($this->showLabels) && $this->showLabels && $heading != 'fabrik_select' && $heading != 'fabrik_actions') :
                echo '<span class="muted " ' . $hStyle . '>' . $label . ': </span>';
            endif; ?>

        <?php echo '<span class="' . $c['class'] . '" ' . $cStyle . '>' . $d . '</span>'; ?>
        </div>
        <?php if ($heading == "fabrik_actions"){ ?>
            </div>
        <?php } ?>
    <?php }?>
    <?php
endforeach;
?>
</div>
 
buttons.php
PHP:
<?php
/**
 * Div List Template - Buttons
 *
 * @package     Joomla
 * @subpackage  Fabrik
 * @copyright   Copyright (C) 2005-2023  Media A-Team, Inc. - All rights reserved.
 * @license     GNU/GPL http://www.gnu.org/copyleft/gpl.html
 * @since       3.1
 */

// No direct access
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Language\Text;

?>
<div class="row justify-content-between col-xl-4 col-12">
    <?php if (array_key_exists('all', $this->filters)) {
    ?>
    <div class="col-auto align-self-center fabrikSearchAll">
        <div class="row row-cols-auto align-items-end "<?php echo $this->filter_action != 'onchange' ? 'class="input-append"' : ''?>>
                <?php
                if (array_key_exists('all', $this->filters)) {
                    echo $this->filters['all']->element;
                    if ($this->filter_action != 'onchange') {
                        echo '<input type="button" class="btn btn-info btn-sm fabrik_filter_submit button" value="' . Text::_('COM_FABRIK_GO') . '" name="filter" >';
                    };
                }; ?>

        </div>
    </div>
<?php
}
?>
    <div class=" col-auto fabrikButtonsContainer">
        <div class="row row-cols-auto align-items-start">
            <?php if ($this->showAdd) :?>
                <div class="col px-0">
                    <a class="addbutton addRecord btn " href="<?php echo $this->addRecordLink;?>">
                        <?php echo FabrikHelperHTML::icon('icon-plus', $this->addLabel);?>
                    </a>
                </div>
            <?php endif; ?>
            <?php if ($this->showToggleCols) :?>
                <div class="col px-0">
                    <?php echo $this->loadTemplate('togglecols');?>
                </div>
            <?php endif; ?>
            <?php if ($this->canGroupBy) : ?>
                <div class="col px-0">
                    <?php
                    $displayData = new stdClass;
                    $displayData->icon = FabrikHelperHTML::icon('icon-list-view');
                    $displayData->label = Text::_('COM_FABRIK_GROUP_BY');
                    $displayData->links = array();
                    foreach ($this->groupByHeadings as $url => $obj) :
                        $displayData->links[] = '<a  class="nav-link" data-groupby="' . $obj->group_by . '" href="' . $url . '">' . $obj->label . '</a>';
                    endforeach;

                    $layout = $this->getModel()->getLayout('fabrik-nav-dropdown');
                    echo $layout->render($displayData);
                    ?>
                </div>
            <?php endif;

            if (($this->showClearFilters && (($this->filterMode === 3 || $this->filterMode === 4))  || $this->bootShowFilters == false)) :
                $clearFiltersClass = $this->gotOptionalFilters ? "clearFilters hasFilters" : "clearFilters"; ?>
                <div class="col px-0">
                    <a class="btn  <?php echo $clearFiltersClass; ?>" href="#">
                        <?php echo FabrikHelperHTML::icon('icon-undo', Text::_('COM_FABRIK_CLEAR'));?>
                    </a>
                </div>
            <?php endif;

            if ($this->showFilters && $this->toggleFilters) :?>
                <div class="col px-0">
                    <?php if ($this->filterMode === 5) :
                    ?>
                        <a href="#filter_modal" data-bs-toggle="modal" class="btn ">
                            <?php echo $this->buttons->filter;?>
                            <span><?php echo Text::_('COM_FABRIK_FILTER');?></span>
                        </a>
                            <?php
                    else:
                    ?>
                    <a href="#" class="toggleFilters btn " data-filter-mode="<?php echo $this->filterMode;?>">
                        <?php echo $this->buttons->filter;?>
                        <span><?php echo Text::_('COM_FABRIK_FILTER');?></span>
                    </a>
                        <?php endif;
                    ?>
                </div>

            <?php endif;
            if ($this->advancedSearch !== '') : ?>
                <div class="col px-0">
                    <a href="<?php echo $this->advancedSearchURL?>" class="advanced-search-link btn ">
                        <?php echo FabrikHelperHTML::icon('icon-search', Text::_('COM_FABRIK_ADVANCED_SEARCH'));?>
                    </a>
                </div>
            <?php endif;

            if ($this->showCSVImport || $this->showCSV) :?>
            <div class="col px-0" >
                <?php
                $displayData = new stdClass;
                $displayData->icon = FabrikHelperHTML::icon('icon-upload');
                $displayData->label = Text::_('COM_FABRIK_CSV');
                $displayData->links = array();
                if ($this->showCSVImport) :
                    $displayData->links[] = '<a href="' . $this->csvImportLink . '" class="csvImportButton nav-link">' . FabrikHelperHTML::icon('icon-download', Text::_('COM_FABRIK_IMPORT_FROM_CSV'))  . '</a>';
                endif;
                if ($this->showCSV) :
                    $displayData->links[] = '<a href="#" class="csvExportButton nav-link">' . FabrikHelperHTML::icon('icon-upload', Text::_('COM_FABRIK_EXPORT_TO_CSV')) . '</a>';
                endif;
                $layout = $this->getModel()->getLayout('fabrik-nav-dropdown');
                echo $layout->render($displayData);
                ?>
            </div>
            <?php endif;

            if ($this->showRSS) :?>
            <div class="col px-0">
                    <a href="<?php echo $this->rssLink;?>" class="feedButton">
                        <div class="row row-cols-auto">
                            <div class="col pe-0"><?php echo FabrikHelperHTML::image('feed.png', 'list', $this->tmpl);?></div>
                            <div class="col ps-1"><?php echo Text::_('COM_FABRIK_SUBSCRIBE_RSS');?></div>
                        </div>
                    </a>
            </div>
            <?php
            endif;

            if ($this->showPDF) :?>
                <div class="col px-0">
                    <a href="<?php echo $this->pdfLink;?>" class="pdfButton btn ">
                        <?php echo FabrikHelperHTML::icon('icon-file', Text::_('COM_FABRIK_PDF'));?>
                    </a>
                </div>
            <?php endif;

            if ($this->emptyLink) :?>
                <div class="col px-0">
                    <a class="doempty btn " href="<?php echo $this->emptyLink;?>">
                        <?php echo FabrikHelperHTML::icon('icon-ban', Text::_('COM_FABRIK_EMPTY'));?>
                    </a>
                </div>
            <?php
            endif;
        ?>
        </div>
    </div>
</div>
 
The other files I think I didn't change at all.
If custom.css is needed I can put in here too.

I hope someone can help me
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top