Twitter Bootstrap Question posted in

Twitter bootstrap – Cycle2 slides in twitter-bootstrap grids

I have some grids like

row 4 | 4| 4
row 8    | 4

than I place in first row first and second grid each a cycle2 slider than on seconds rows second grid again a cycle2
It’s a kind of playing with symmetry

My Problem Images they have different resolution and the height should expand to the highest grid. So for example in my first row the height of cycle2 images should be the same.

here I have a jsfiddler mockup
https://jsfiddle.net/lgtsfiddler/72ycx3m6/19/

How to proceed in this case?

Tags:

3

Answers


  1. 0

    Very difficult to follow your question, but if I understand you correctly, you’re looking to set a series of columns as the same height as the highest column’s height. You haven’t posted any code, or told us which framework you’re working with (maybe Bootstrap because the tag?), so it’s very difficult to provide an accurate answer.

    Use jQuery to get the height of each column you want to compare, saving the heights in an array, compare the heights to find highest, then set height of all columns to that height. You will have whitespace in your design though, but that is how to do it.

    Login or Signup to reply.
  2. 0

    Are you looking for output like this:

    https://jsfiddle.net/72ycx3m6/24/

    Here I have added a equalheight class to each row div and also added JS function like:

    $(document).ready(function(){
    var maxHeight = 0;
    $(".img-responsive").each(function(){
         var currentHeight = $(this).height();
         if (currentHeight > maxHeight)
             maxHeight = currentHeight;
    });

    $("div.equalheight").height(maxHeight);
});
    Login or Signup to reply.
  3. 0

    I’m not sure if I understood your problem correctly, but if you are looking for a solution to horizontally align columns within a row, or to normalize heights of columns within a row, then you should take look at this awesome jQuery script:

    http://brm.io/jquery-match-height/

    We are using it in a dozen projects when trying to horizontally align an unknown number of “div.col-*” of unknown height within a “div.row”. Our common approach looks somethin like this

    <div class="row normalizeMe">
    <div class="col-sm-6 col-md-4">unknown height...</div>
    <div class="col-sm-6 col-md-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
    <div class="col-sm-4">unknown height...</div>
</div>
<script>
    $('.row.normalizeMe > div[class*="col-"]').matchHeight();
</script>

    No matter which screen size or how large the boxes are, the script will always nicely align your col-– horizontally. It should also work to normalize the height of the container of your slides.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search