Observing changes in the dimensions of flex children using MutationObserver

Question

Observing changes in the dimensions of flex children using MutationObserver

Considering the following structure of the Document Object Model...

<div id="outer-container">
  <div class="side-panel"><div width="200px"/></div>
  <div id="content"><!-- some content --></div>
  <div class="side-panel"><div width="100px"/></div>
</div>

And with these specified CSS rules...

#outer-container {
  display: 'flex';
  align-items: 'stretch';
  width: '100vw';
  height: '100vh';
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: 'flex';
  flex-direction: 'column';
  align-items: 'stretch';
  flexGrow: 1;
}

Is there a way to monitor changes in the width/height of #content?

Typically, this involves observing mutations in the style attribute and verifying the element's dimensions when the style is altered. However, as it is a child within a flex container, checking the width/height attributes reveals them undefined.

Mutations to the size of #content do not trigger events from my MutationObserver (configured with

{attributes: true, attributeFilter: ['style']}

) as expected.

The objective is to convert the side panels into drawers once the width of #content falls below a certain limit. I am using React, but this issue seems to be more JavaScript/html-related.

Any assistance would be greatly appreciated!

PS: I attempted setting flex-basis on #content to the predefined threshold, with no success. Should I define a specific width instead of utilizing flex-basis? Uncertain if this might lead to unintended flex behavior.

html css flexbox mutation-observers

Answer 1

Answer №1

To determine the dimensions of an element, you have a few options available to you. You can use properties like offsetWidth/offsetHeight, the method getBoundingClientRect(), or the method getComputedStyle() within a function such as checkWidth(). Make sure to call this function whenever events or functions alter the dimensions of your element.

An example would be using a resize event to trigger changes in your element's dimensions and then running the function when that event occurs.

To see this concept in action, run the following Code Snippet and then either resize your browser or click the button for a practical demonstration:

/* JavaScript */

function checkWidth(){
  let e = document.getElementById("content");
  let widthA = window.getComputedStyle(e).width;
  let widthB = e.getBoundingClientRect().width;
  let widthC = e.offsetWidth;

  console.log("getComputedStyle: " + widthA);
  console.log("getBoundingClientRect: " + widthB);
  console.log("offsetWidth: " + widthC);
};

window.addEventListener("resize", checkWidth); // Include checkWidth() since "resize" affects element's dimensions

function editContent(){
  let e = document.getElementById("content");
  e.style.width = "300px";
  
  checkWidth(); // Run checkWidth() after editContent() alters element's dimensions
}

document.getElementById("btn").addEventListener("click", editContent);

/* CSS */

#outer-container {
  display: flex;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
}

<!-- HTML -->

<button id="btn">Click Me</button>
<hr/>
<div id="outer-container">
  <div class="side-panel">
    <div style="width: 200px">Left</div>
  </div>
  <div id="content">Middle</div>
  <div class="side-panel">
    <div style="width: 100px">Right</div>
  </div>
</div>

Answer 2

To determine the dimensions of an element, you have a few options available to you. You can use properties like offsetWidth/offsetHeight, the method getBoundingClientRect(), or the method getComputedStyle() within a function such as checkWidth(). Make sure to call this function whenever events or functions alter the dimensions of your element.

An example would be using a resize event to trigger changes in your element's dimensions and then running the function when that event occurs.

To see this concept in action, run the following Code Snippet and then either resize your browser or click the button for a practical demonstration:

/* JavaScript */

function checkWidth(){
  let e = document.getElementById("content");
  let widthA = window.getComputedStyle(e).width;
  let widthB = e.getBoundingClientRect().width;
  let widthC = e.offsetWidth;

  console.log("getComputedStyle: " + widthA);
  console.log("getBoundingClientRect: " + widthB);
  console.log("offsetWidth: " + widthC);
};

window.addEventListener("resize", checkWidth); // Include checkWidth() since "resize" affects element's dimensions

function editContent(){
  let e = document.getElementById("content");
  e.style.width = "300px";
  
  checkWidth(); // Run checkWidth() after editContent() alters element's dimensions
}

document.getElementById("btn").addEventListener("click", editContent);

/* CSS */

#outer-container {
  display: flex;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
}

.side-panel {
  flex-shrink: 0;
}

#content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
}

<!-- HTML -->

<button id="btn">Click Me</button>
<hr/>
<div id="outer-container">
  <div class="side-panel">
    <div style="width: 200px">Left</div>
  </div>
  <div id="content">Middle</div>
  <div class="side-panel">
    <div style="width: 100px">Right</div>
  </div>
</div>

Observing changes in the dimensions of flex children using MutationObserver

Answer №1

Similar questions

When adding margin-left and margin-right, images do not appear in their designated positions

What could be causing the CSS and HTML connection to fail?

Creating consistent image placement across all divs: a step-by-step guide

Customize the website's CSS for optimal viewing on an iPad

Rotate Text in HTML <thead> Tag

Examining pseudo-elements on Internet Explorer

Exploring the world of JQuery Ajax selectors

How to properly center and align the width of a figcaption element within an image placed in a figure element

What is the best way to prevent right floated DIVs from interfering with each other's positioning, specifically within a specified space?

Transforming images with Imagick

How to vertically align an image within a div that has a variable height

A picture placed side by side with a list

Attempting to prevent the use of the <p> tag solely before the text

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Transforming React drag and drop page builder state into a functional html, css, and js layout

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

What is the best method to remove the x and up/down arrow components of an input date field?

Tips for creating two columns within a Bootstrap row, one with a form and the other with an image, that are both the same height and responsive

Is it possible to adjust the viewport to a size larger than 1024?

HTML input field template