WooThemes - Flexslider: Height of flex-viewport

Question

I installed the flexslider from woothemes on my webpage and the <div class="flex-viewport" is added to the site automatically via the jquery.flexslider.js on line 621.

I have to adjust the height to a fixed value of 790px but the height is somehow calculated. I'm looking for the line in flexslider.js where the height is added to .flex-viewport. Does somebody know how I can add a fixed height here?

Thanks.

Code:

<div id="slider" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 710px; ">
    <ul class="slides" style="width: 1200%; -webkit-transition: 0.6s; -webkit-transform: translate3d(-4900px, 0px, 0px); ">

Answer 1

Basically flexslider doesn't have a feature for fixed height according to its document. But I found some code to solve this problem here in the official repository by calculating the tallest height to supply the height of slide.

$(document).ready(function() {
    fixFlexsliderHeight();
});

$(window).load(function() {
    fixFlexsliderHeight();
});

$(window).resize(function() {
    fixFlexsliderHeight();
});

function fixFlexsliderHeight() {
    // Set fixed height based on the tallest slide
    $('.flexslider').each(function(){
        var sliderHeight = 0;
        $(this).find('.slides > li').each(function(){
            slideHeight = $(this).height();
            if (sliderHeight < slideHeight) {
                sliderHeight = slideHeight;
            }
        });
        $(this).find('ul.slides').css({'height' : sliderHeight});
    });
}

Answer 2

$(document).on('click', '.flex-next, .flex-prev', function () {

    $('#slider .flex-viewport').animate({ height: $('.flex-active-slide img').height() }, 'fast');

});

Answer 3

Just overwrite the height via css. & don't forget to put "!important".

#slider .flex-viewport{height:790px!important;}