jedfoster/Readmore.js

Big white space after open text block

Opened this issue · 8 comments

I think i have same issue After click on 'read more' i have big white space in bottom my block.
Version chrome on mobile - 72.

+1. Still actual in v3.

could we get this fixed..?

on mobile.

function setBoxHeights(element) {
var el = element.clone().css({
height: 'auto',
width: element.width(),
maxHeight: 'none',
overflow: 'hidden'
}).insertAfter(element),
expandedHeight = element.outerHeight(),
cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
defaultHeight = element.data('defaultHeight');

@Pupinia solved for us. @jedfoster would love it check this in!

changed el to element, when setting expandedHeight

@w3human I'd be happy to consider a PR.

function setBoxHeights(element) {
var el = element.clone().css({
height: 'auto',
width: element.width(),
maxHeight: 'none',
overflow: 'hidden'
}).insertAfter(element);
element.css('height', 'auto');

    var expandedHeight = element.outerHeight(),
    cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
    defaultHeight = element.data('defaultHeight');

el.remove();

var collapsedHeight = cssMaxHeight || element.data('collapsedHeight') || defaultHeight;

// Store our measurements.
element.data({
  expandedHeight: expandedHeight,
  maxHeight: cssMaxHeight,
  collapsedHeight: collapsedHeight,
  defaultHeight: defaultHeight,
})
// and disable any `max-height` property set in CSS
.css({
  maxHeight: 'none'
});

}