Multi line Condition error on click

[sohilpx]

Hello,
I have used eqcss for the product display. Here is the fiddle https://jsfiddle.net/sohilpx/6af77wcm/ .

It renders fine initially but when i click anywhere the height of the div increases automatically. This is not the expected behavior.

Can you look into this?

[tomhodgins]

Hi @sohilpx, thanks for checking out this spec and EQCSS and for your question! You're totally right that every click affects the layout in this demo, and I think it's based on the way we're guessing the number of 'lines' here. The logic in the plugin is an estimate based on a number of measurements: https://github.com/eqcss/eqcss/blob/gh-pages/EQCSS.js#L979&L998

element_height =
  parseInt(computed_style.getPropertyValue('height'))
  - parseInt(computed_style.getPropertyValue('border-top-width'))
  - parseInt(computed_style.getPropertyValue('border-bottom-width'))
  - parseInt(computed_style.getPropertyValue('padding-top'))
  - parseInt(computed_style.getPropertyValue('padding-bottom'));

element_line_height = computed_style.getPropertyValue('line-height');

if (element_line_height === 'normal') {

  var element_font_size = parseInt(computed_style.getPropertyValue('font-size'));

  element_line_height = element_font_size * 1.125;

} else {

  element_line_height = parseInt(element_line_height);

}

The min-lines and max-lines measurements are the hardest to determine, and because of this the results are a little strange. Here we're measuring the height of the element, taking height, border, padding, and line-height into account (making guesses where we can't measure directly) and dividing the subtracted total height by the determined (or guessed) line-height value. So when you've truncated it with (min-lines: 3) it's 'seeing' the element as having less lines of text visible, so every click, when EQCSS reprocessed the styles it decides the first time that the rule should apply, then the next time that it's less than 3 lines, so it no longer applies. Then the next time it sees the full height and the rule applies, which sets it up to be removed the next time, ad infinitum.

I'd recommend using a height-based query, here I've reworked the demo and given a min-height to the description, and visually I am guessing this looks similar to what you're trying to style here: https://jsfiddle.net/tomhodgins/6af77wcm/1/

Alternatively, I've done something similar to what you're doing here (multi-line text truncation) with EQCSS through a slightly different approach: https://codepen.io/tomhodgins/pen/KgKggX

In my HTML I've put the text to display inside a data-truncate="" custom HTML attribute, then using EQCSS I determine how much text to display based on the element's own width, and append the '…' if the text is truncated:

<p data-truncate="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></p>

@element [data-truncate] {
  $this:before {
    content: 'eval("getAttribute('data-truncate').substring(0,scrollWidth/3)")…';
  }
}

I hope this helps point you in the right direction! Let me know if there's anything else I can do to help :D