Adjust the size of a component dynamically to match another

Question

Adjust the size of a component dynamically to match another

In this scenario, we are dealing with two columns labeled A and B. Typically, column A contains more content, resulting in a greater height of 126px, while column B has less content, leading to a shorter height of 94px. The challenge arises when the height of column A changes dynamically due to AJAX, as we want column B's height to adjust accordingly and match that of column A.

<div id="A">filler text</div>

|

<div id="B">filler text2</div>

To tackle this issue, we may utilize jQuery or JavaScript to capture the height of the element with ID #A and apply it to #B. However, complications arise when the content undergoes dynamic changes.

javascript jquery html css

Answer 1

Answer №1

$("#x").css("width", $("#y").css("width") );

This code snippet could be utilized within the success callback function of an asynchronous request, like so:

$.ajax({
  ...
  success:function(response){
    // Check and update width values if necessary
    if( $("#x").width() > $("#y").width() ){
      $("#y").css("width", $("#x").css("width") );
    }
  }
});

Answer 2

$("#x").css("width", $("#y").css("width") );

This code snippet could be utilized within the success callback function of an asynchronous request, like so:

$.ajax({
  ...
  success:function(response){
    // Check and update width values if necessary
    if( $("#x").width() > $("#y").width() ){
      $("#y").css("width", $("#x").css("width") );
    }
  }
});

Answer 3

Answer №2

Using pure JavaScript:

var doc = document;
doc.getElementById("B").style.height = doc.getElementById("A").offsetHeight;

Answer 4

Using pure JavaScript:

var doc = document;
doc.getElementById("B").style.height = doc.getElementById("A").offsetHeight;

Adjust the size of a component dynamically to match another

Answer №1

Answer №2

Similar questions

What causes my Excel file to become corrupted when inputting new data?

Creating a customizable theme for a website built with Bootstrap, incorporating changes to brand colors and more, by utilizing a .less file

Fundamental CSS - the technique of layering a DIV with a semi-transparent DIV on top

Creating an array from objects without manual effort

CSS: Dynamically adjusting height based on parent element's current height

Adding emphasis to the text within a submit button using HTML and CSS

Alerts cannot be displayed in Javascript before the page is unloaded

CSS - ensure that two elements with display: table-row stay stacked on top of one another

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Can anyone provide guidance on displaying a JS alert every time a tab in the slider is opened?

Utilize JavaScript to connect WhatsApp with the website

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

NextAuth credentials are undefined and authentication is malfunctioning in React

I believe the term for this is an inline text alignment: center, but for some reason, I am unable to make it function properly within

What is the best way to extract a JavaScript variable value from an HTML dump or content?

Clicking on the button link causes it to jump to a

Exploring BreakPoints using gridlisttiles

Encountering a "Raphael is undefined" error message when working with Treant.js

Send the form data from a modal controller in AngularJS to an ng-controller outside of the modal

The execution of jQuery was hindered due to the implementation of PHP include