Isotope clickable element: grow height to match content
jquery, jquery-isotope
Solution
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...
Problem
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> ```