Layout shift from active filters filter

Hi,

Please provide your site url where issue can be tested. Without seeing the issue, it’s hard to understand what you mean by “layout shift”.

Regards,
Dmytro

What i mean by layout shift is not that the styles are not loaded in time…the styles are there but the div instead of being already loaded/displayed..it loads/displays after a moment which causes the div under it to shift too.

Check it out here to get a better understanding: [ redundant link removed ]
Select a filter and then reload the page.

Thanks

• This reply was modified 2 years, 2 months ago by Jan Dembowski.

Yes, there is a small delay before Active filters are shown. The reason for this is that Active filters are shown by Javascript as soon as the page loads.

If that doesn’t work for you, you can use Active filers as in the sidebar as other filters. It will still load with Javascript, but this time the products will not have this shift.

Regards,
Dmytro

Hmm in sidebar the rest of the filters would shift so still an issue. How about a solution where i can load the javascript responsible fast enough so that i don’t get the shift?

note: even when i disable my caching plugin wprocket it still happens
note2: Even when i enable option to always show active filters label even when it’s empty it shifts.

• This reply was modified 2 years, 2 months ago by theotheo.
• This reply was modified 2 years, 2 months ago by theotheo.

Sorry but this is how it works. It is done fully with js so it has a delay while it is shown.

As I see on your site now there is just a blink of the selected filters. All other content is not moving. That is all what could be done now. If you have PHP knowledge and time you may try to add it.

$template_content = apply_filters('BeRocket_AAPF_template_full_element_content', $template_content, $berocket_query_var_title);

example of content change

add_filter('BeRocket_AAPF_template_full_element_content', array($this, 'selected_filters_hide_empty'), 1100, 2);
function selected_filters_hide_empty($template_content, $berocket_query_var_title) {
        if( $berocket_query_var_title['new_template'] == 'selected_filters' ) {
            if( empty($berocket_query_var_title['selected_area_show']) ) {
                $template_content['template']['attributes']['class']['hide_empty'] = 'bapf_sfa_mt_hide';
            }
        }
        return $template_content;
    }

Regards,
Dmytro

As you saw i eliminated the shift by adding an element(product sort by) in the same div so that it always takes the needed space making active filters appear without an issue but a slight flash. Though problem is still there on mobile devices where there is no space to do this trick. I will try eliminating the issue for mobile devices too as well as eliminating the flash and i will post my solution here if i achieve it.

Thank you again.