2

Is it possible to have overflow: hidden; base on 1st column div?

I have in bootstrap row div col-md-9 with MySQL content div col-md-3 with MySQL content

I would like adjust the height of these 2 columns but based on the 1st column's data.

If 2nd coumn has more data than the 1st column, the data of the 2nd column must be cut (with overflow: hidden; for example) to have an equal column.

My code for now :

<div class="container-fluid">
<div class="row" style="display: flex;flex-wrap: wrap;">

<div class="col-md-9" style="display: flex;flex-wrap: wrap;">
MySQL data
</div>

<div class="col-md-3" style="display: flex;flex-wrap: wrap;">
MySQL data
</div>

</div>
</div>
Rob
  • 14,746
  • 28
  • 47
  • 65
nickko
  • 356
  • 3
  • 12

1 Answers1

0

ps. based on first data column hm:

jQuery(document).on("ready page:change", function() {

    setInterval(set_columns_height,500);
});

function set_columns_height(){
    var c1 = jQuery('.first_column').height();
    var c2 = jQuery('.second_column').height();

    if ( c1 != c2 ) {
        jQuery('.second_column').css('height',c1 + 'px');
    }
}
Wordica
  • 2,427
  • 3
  • 31
  • 51
  • Just perfect ! Thank you very much :) – nickko Nov 05 '17 at 08:00
  • @nickko That is a terrible solution, using an script interval timer ticking all the time and eating resources. – Asons Nov 05 '17 at 12:02
  • He can always use it after page load ... but one interval every 0.5 second or 1 second ... without exaggeration :) – Wordica Nov 05 '17 at 13:29
  • When there exist much better script solutions than using a timer, it becomes a really bad solution, and on top of that, why at all use script when this so easily solved using CSS? – Asons Nov 05 '17 at 13:46
  • ps. also when You check performance test for javascript vs other languages ... it depends on browsers and JS isn't so slow. Why not in CSS ? Maybe give solution in CSS and do not only criticize others solution. I create many intervals on my sites and they works ok ... CSS - animations on CSS are also very "eating resources" so peoples shouldn't use them ? ... in FireFox they can even stop whole site. And last thing, JS solution do not hide content but display it ... overflow:hidden won't looks good on site, of course it depend what this columns are for. – Wordica Nov 05 '17 at 13:49