Read more - timeline blog problem

3 replies · opened Sep 16, 2023

FfotobobSep 16, 2023

I installed your "read more" code in a blog post on your timeline blog template.

I think the "read more" feature in a blog post is a great solution for reading blog posts, however, it does not work well with the timeline blog.

When I click on "read more" the div expands as it should, but it expands under the post below it instead of pushing that post down to make the "read more" text visible.

I assume it is a problem with the posts in the timeline blog being absolutely positioned.

Is there a fix?

SSemicolon WebSTAFFSep 18, 2023

Hello,

Apologies for the Inconveniences caused!

Read More Elements are not recommended to be used in .grid-container Elements as they will make the Layout unstable and will require relayouts. You can consider using the following JS Code at the bottom of the Page:
[ch_pre type="js"]document.querySelectorAll('.read-more-trigger').forEach( function(elem){
elem.addEventListener('click', function(){
jQuery(elem).parents('.grid-container').isotope('layout');
});
});[/ch_pre]

Hope this Helps!

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

FfotobobSep 21, 2023

This unfortunately did not work, so I took your advice to not use Read More in a .grid-container and abandoned the idea.

SSemicolon WebSTAFFSep 22, 2023

Hello,

Thanks for your Patience!

We had reworked on the Codes and made this work but we must admit it is not elegant and it really won't work well on the Page due to reLayouts. Thanks for Understanding.

Meanwhile, 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