Question

I have a standard isotope view with clickable elements. By clicking on an element it will become bigger. The height of the big element is defined in the CSS-file, but i need variable height, depending on the content of the DIV (content is text); unfortunately using the min-height css-property instead of height does not work, the height always will be the defined min-height, even when content is more. Any opinions on this?

heres my javascriptcode:

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#container');
         jQuerycontainer.addClass('clickable');
   // add the class large to the first element
     jQuerycontainer.find('.views-row-1').each(function() {
         jQuery(this).addClass('large');
     });
     jQuerycontainer.isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 230
        },
        masonryHorizontal: {
            rowHeight: 230
        }
    });
    var jQueryoptionSets = jQuery('#options .option-set'),
        jQueryoptionLinks = jQueryoptionSets.find('a');
    jQueryoptionLinks.click(function() {
        var jQuerythis = jQuery(this);
        // don't proceed if already selected
        if (jQuerythis.hasClass('selected')) {
            return false;
        }
        var jQueryoptionSet = jQuerythis.parents('.option-set');
        jQueryoptionSet.find('.selected').removeClass('selected');
        jQuerythis.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = jQueryoptionSet.attr('data-option-key'),
            value = jQuerythis.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode(jQuerythis, options);
        } else {
            // otherwise, apply new options
            jQuerycontainer.isotope(options);
        }
        return false;
    });
    // change size of clicked element
    jQuerycontainer.delegate('.element', 'click', function() {
       // first remove all large classes
      jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');
      });   
        // then we can toggle large on the selected item
        jQuery(this).toggleClass('large');
        jQuerycontainer.isotope('reLayout');
    });
});
</script>

Answer 1

Normally, if you set the width to your grid and the height to auto, the Isotope items just grow in height, depending on their content and the styling of the content; see this fiddle here. Hope that helps…