I'm currently utilizing Bootstrap in a web project and struggling to dynamically set the same height for column elements. I am aware of the .row-eq-height class, but using it compromises the responsiveness of Bootstrap elements. My goal is to ensure that the #selection column matches or exceeds the height of #map-container (especially considering its border, which should not cut off the content).
I've written a few lines of jQuery:
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('height',map_height);
}<div class="row" id="selection-wrapper">
<div class="col-lg-7 col-xs-12" id="map-container">
<!-- Zone for map display -->
<div id="map"></div>
</div>
<div class="col-lg-5 col-xs-12">
<div class="text-container" id="selection">
// Content
</div>
</div>
</div>Although these lines function as intended, I am unsure of the best approach for executing them consistently to maintain equal heights at all times, even when the container width changes (impacting the height of #map-container).