Read more - timeline blog problem

Question

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?

SemiColonWeb · Accepted Answer

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:

document.querySelectorAll('.read-more-trigger').forEach( function(elem){
	elem.addEventListener('click', function(){
		jQuery(elem).parents('.grid-container').isotope('layout');
	});
});

Hope this Helps!

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

fotobob · Answer

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

SemiColonWeb · Answer

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.