Canvas Support

Accordion content getting cropped by footer

13 replies · opened May 31, 2020

Jjd_in_sbMay 31, 2020

When I click on my accordions they open just fine. When I scroll to the bottom of the page however, I noticed the expanded height of the accordion content causes the content at the very bottom of the page to now be cropped off by the footer. Before clicking an accordion the whole page was displayed fine. How can I make it so that the height of the page increases (and the footer gets pushed lower) when accordions open?

Basically the footer needs to float with the accordion content, not crop the accordion content.

Thanks!

Jjd_in_sbJun 1, 2020

P.S. I don't wish to have a sticky footer, so preferably the solution would not include that.

Here is a sample page that illustrates the problem of the accordion content underlapping the footer when you open the accordion:

https://www.santabarbara.com/dining/test.asp

SSemicolon WebSTAFFJun 1, 2020

Hello,

This issue is not because of the Footer but the Isotope Functionality you are using on the Content which contains the Accordions. As we see, you are using the Filter, the IsoTope is initialized on the Content and thus it sets a Fixed Height on the Content, so when you open the Accordion, the Height is not affected and gets cut off from the Footer when you open it. As, the IsoTope Plugin does not support flexible heights, we recommend you to use Normal Content Areas instead or if you would really like to use the Filter, consider using this Template: http://themes.semicolonweb.com/html/canvas/faqs.html where Flexible Heights are Possible.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjd_in_sbJun 1, 2020

Thank you. I don't need the Isotope Functionality script code that was in the footer so I completely removed it. The problem still persists however (lack of flexible heights). Any ideas?

SSemicolon WebSTAFFJun 2, 2020

Hello,

The Isotope is still getting applies on the Content because of the .grid-container Class. Removing this Class should fix the issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjd_in_sbJun 2, 2020

Ok I removed grid-container completely from the page.

I used to have: <div id="portfolio" class="portfolio grid-container portfolio-1 clearfix">
Now I have: <div id="portfolio" class="portfolio portfolio-1 clearfix">

But the problem still persists. Are there any other changes you could suggest I make?

Thank you for your continued help.

SSemicolon WebSTAFFJun 3, 2020

Hello,

It appears that the Isotope is still getting initialized on the Container due to the Filter being used. You will need to remove the data-container="#portfolio" Attribute from the .portfolio-filter Element as well.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjd_in_sbJun 3, 2020

Removing the portfolio class does seem to allow flexible heights (that's progress, thank you!) but as you mentioned previously, I can't use portfolio filters anymore.

You previously suggested I use a different Filter mechanism that allows flexible heights and directed me to the template: http://themes.semicolonweb.com/html/canvas/faqs.html

That template appears to work with the style.css file on your server ( http://themes.semicolonweb.com/html/canvas/style.css ) but it does not work with the style.css that came with the Canvas version: 5.6.1 that I bought last year. When I try to open your faqs.html file using my default Canvas 5.6.1 style.css it looks all messed up, like the attached image. When I edit the code so it uses the style.css on your server it works fine.

Is you faqs template compatible with Canvas 5.6.1 ?

SSemicolon WebSTAFFJun 4, 2020

Hello,

Please use the faqs.html Template from your Canvas v5.6.1 Package. As we have just released a New Update that has Breaking Changes which affect the Toggles and a lot of other things: http://docs.semicolonweb.com/docs/upgrading-v5-to-v6/migration/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjd_in_sbJun 10, 2020

Ok, I am switching my page to be modeled after faqs.html from Canvas v5.6.1 Package, and not using an Isotope for reasons described above.

Unfortunately the filter defaults to "show all" instead of my first filter "Marketplace". How can I get it to filter "Marketplace"?
I added data-default=".faq-marketplace" per your forum but that didn't help.

Any suggestions?

SSemicolon WebSTAFFJun 10, 2020

Hello,

This is a Custom Filter Functionality and does not support the data-default Attribute. Consider adding the following JS Code at the bottom of the Page inside the document.ready Function:


$faqItems.css('display', 'none');
$('.faq-marketplace').fadeIn(500);
$('.grid-filter li').removeClass('activeFilter');
$( '[data-filter=".faq-marketplace"]' ).parent('li').addClass('activeFilter');

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Jjd_in_sbJun 11, 2020

That worked perfectly. Looks like we solved the problem. The footer goes up and down with the accordions as I had hoped. Thank you!

SSemicolon WebSTAFFJun 11, 2020

Hello,

Thats great to know! :) Glad that your issues were resolved. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard