I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container.
<annotation>
<div style="width:100%;min-height:70px;overflow:hidden;">
<p><%= p.annotation %></p>
</div>
</annotation>
Here is the relevant readmore.js section:
<script>
$('annotation').readmore({
speed: 75,
collapsedHeight: 60,
moreLink: '<a href="#">Show more</a>',
lessLink: '<a href="#">Show less</a>'
});
</script>
The issue I am facing is when the annotation is long, the "Read more" link appears below the annotation tag instead of inside it, causing content below to shift down by one line.
https://i.sstatic.net/cxfY1.jpg
Is there a way to keep the "read more" link inside the div/annotation without affecting the layout below?
UPDATE: Following the initial response, I realized I need a fixed-height text block and display the "read more" link only if necessary. Thank you!
UPDATE2: I have found a workaround solution to my problem:
<% if p.annotation.length < 90 %>
<div style="height:11px"></div>
<% end %>