How to update height of a div to match another div?
I'm trying to live update a variable in javascript to set the height of a div.
Trying to use ResizeObserver but im stuck now.
17 Replies
can you please give more details or pics on how you want it to look or behave?
a codepen demonstrating the problem, or at least the code in a code block would be very handy
I would like for the height of the right div to share the same height as the left img div at all times. When the screen size is being moved around to live update the variable so they match
any reason you can't do that with CSS?
if i hard set the height itll be the same height forever i would like for it to update on screen resizing, if i set the height too small or too big the Div Row gets somewhat offset
this is how it look on mobile version
also, at this point i want to know how to do this
i can set the height of the div = to height of the img, but it doesnt update on screen resize the window needs to be refreshed
Window: resize event - Web APIs | MDN
The resize event fires when the document view (window) has been resized.
but honestly what you're describing is just a responsive CSS layout, which would be the (I hate to say this, but it applies here) "proper" way to fix this
ResizeObserver - Web APIs | MDN
The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.
can this be used aswell? in anycase how?
I rather have code do the work for me instead of writing down multiple mediaqueries, also i want it to be seamless and smooth instead of chunks
you don't have to write a ton of media queries, just the one to get the mobile version to go below instead of next to the image
this should do it right? or am i missing something from your question?
https://codepen.io/MarkBoots/pen/NWMgewL
yes it does, but its running on Display Grid, im using bootstrap so im running on Display Flex
when i go mobile i would like image and text to be one on top of the other i guess i could do a media query and change it in css
i don't use bootstrap. but it seems it also has grid https://getbootstrap.com/docs/5.1/layout/css-grid/
CSS Grid
Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
Mark's example switches to one above the other at specific sizes
if you want smooth, CSS is the way to go, but if you want to do it with javascript, the resize event is the thing to look at. You'd want to set the height on load, and then on resize reset it
Using JS for this seems like overkill imo. With flex, the default height of elements is stretch, so they should match heights when flex is at play and they're next to one another.
If you're using bootstrap, and each is nested inside a column, maybe it's slightly more work, but it looks like you're already using Flexbox to center it vertically?