How to resize element with JavaScript
JavaScript has a native and easy-to-use API to listen for element resize. ResizeObserver is a modern approach to handle element resize.
However, depending on your requirements and UI behavior you may want to consider using one of the following approaches for handling element resize:
ResizeObserver API
The most optimal way to listen for element resize is the ResizeObserver API. Unlike the window resize event that always listens for the whole window viewport resizing, the ResizeObserver will only report changes to a target element if it has changed.
const navbarResizeHandler = function (entries) for (let entry of entries) console.log(entry) // entry object properties: // borderBoxSize // contentBoxSize // contentRect // devicePixelContentBoxSize // target > > const navbarResizeObserver = new ResizeObserver(navbarResizeHandler) const navbar = document.querySelector(".navbar") navbarResizeObserver.observe(element) Use this approach for single HTML elements that you wish to react to resize. It is more optimal than using a window resize event. E.g. you have a navigation bar element with some items in it, and you want to collapse it to the hamburger button if it doesn’t fit into the viewport anymore.
ResizeObserver browser support: https://caniuse.com/resizeobserver
Resize EventListener
For a more generic approach, you can always use the window resize event. This event will fire every time the document viewport (window) has been resized.
function handleWindowResize (e) // handle resizing > window.addEventListener("resize", handleWindowResize) One of the problems with this approach is performance. However, there is a way to optimize the resize event so it’s not called every time the window resizes. You can implement a throttle or debounce.
A throttle means the function will be called once per N amount of time. Any additional function calls within the specified time interval are ignored.
A debounce means function will be called after N amount of time passes since its last call.
Use resize event for when you need to handle global changes to the viewport size and not just separate elements.
CSS media queries
A worthy mention would be CSS media queries. You might want to reconsider using JavaScript resize at all, quite possible that the desired result can be achieved with CSS.
@media screen and (min-width: 600px) /* styles for devices wider than 600px */ > This approach is not as dynamic as a JavaScript one, but you don’t waste any resources running script. So instead of toggling a class name with JavaScript, you can specify a breakpoint and add CSS rules to match your case. On window resize these rules will be applied at a given breakpoint.
clubmate.fi
How to resize HTML elements: with few lines of CSS, using a React hook, or with pure JavaScript
How to resize DOM elements supers easily with pure CSS, or in a more fancy way using React lib.
You know how textareas can be resized easily by dragging from the corner? This same behavior can be activated for any type of element.
For example, the below demo is showing the classic Holy Grail layout. When rendering it, I think it’s important to see the fluidity of the layout, which makes a good use-case for resizable content:
Choose the resizing behavior:
Test in FireFox for full effect Sidebar content Holy Grail
Here’s how that component looks like (nothing too surprising there):
const HolyGrail = () => ( Wrap> Header>Resizable wrapperHeader> SidebarLeft>Sidebar contentSidebarLeft> Content> p>Choose the resizing behavior:p> Content> SidebarRight>Sidebar contentSidebarRight> Footer>Holy GrailFooter> Wrap> )When using it, wrap it to a ResizableContainer component to make it resizable:
ResizableContainer> HolyGrail /> ResizableContainer>That’s pretty simple, check the CSS below.
Here’s the CSS for the resizable container:
.resizable-container height: 400px; overflow: auto; resize: both; >The height is not necessarily needed, I just like it since it’s a wrapper, then I blast the inner component 100% height. The overflow should be anything else than visible .
Possible values for resize are:
none The resizing is just basically deactivated. both Both axis, Y and X, are subjected to resizing. horizontal Size can only be changed horizontally (X axis ↔︎). vertical Only vertical sizing is possible (Y axis ↕︎). block experimental The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value). inline experimental The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).
About the block and inline values
If I understand right, the block and inline values are just a different ways of saying horizontal and vertical, because some languages (like Japanese) are written from top to bottom. If my computer would be in Japanese, setting resize to block would actually be same as horizontal, where as in my English computer it means vertical.
Disabling textarea resizing
By setting resize: none you can easily disable textarea sizing:
Which I think is the only HTML element that has resizing on by default.
Browser support for resize
This is an old feature, I’ve just learned about it recently heh. The block and inline modes only work in FireFox for now (2021).
Iframes can be made resizable the same as any other element, comes handy when displaying demos and such.
I wrapped the Iframe to a div , and set the resizing to the outer element, then set the Iframe width and height to 100%:
div style="resize: both; overflow: auto; height: 300px;"> iframe src="https://clubmate.fi" style="width: 100%; height: 100%; border: 1px solid #aaa" >iframe> div>Resizable React component
The only benefit of making something resizable with JavaScript: have more control.
Below is a component made using a simple resize hook I wrote. Compared to the CSS implementation it has few advantages:
- It gives you the size of the box.
- You can define a sizing step, in the pink example below it’s 40px.
- The look of the handle can be controlled. I’m using a CSS triangle.
- The transition between the steps can be animated.
There’s 3 parts to the code that renders that box.
I build it as a render prop component, so the size is returned from the function. The usage of it looks like this:
ResizableComponent options= step: 40 >>> size => ( span> I’m resizable, my size is size.width> x size.height> span> )> ResizableComponent>At the heart of it, is the useResize hook (below), which doesn’t render anything on its own, but merely provides the logic. You feed the hook a ref to the element you want to resize, and the optional options. Building a hook, rather than a component makes it super flexible, you’re not bound to the limitations of the component, but can make your own.
The resizing hook gives back 3 things: initResize , size , and cursor (more on those below):
import React from 'react' import PropTypes from 'prop-types' import useResize > from './useResize' import Handle, Resizable > from './styles' const ResizableComponent = props => const ref = React.useRef() const initResize, size, cursor > = useResize(ref, props.options) return ( Resizable ref=ref>> props.children(size)> Handle cursor=cursor> onMouseDown=initResize> /> Resizable> ) >This hooks is pretty basic, you could easily bake in more features to it if needed, like keyboard support, Max/min dimensions and so on. But there’s already many React helpers for resizing components, building this hook was more of an exercise.
See a demo in CodeSandbox:
ref A ref to the resized component. Use React.useRef() options.step A px value, i.e.: 40. The box will be resized with this interval. options.axis both|horizontal|vertical . Both is the default.
An the resize hook will return these three things:
initResize A function, which you should call with an onMouseDown in your resizing handle. size This is the live size of the resized box. cursor This depends on the sizing axis passed in options.axis . Then you can pass this along into the your resizing handle.
import React from 'react' const cursor = both: 'nwse-resize', vertical: 'ns-resize', horizontal: 'ew-resize' > export const useResize = (ref, options) => ref = ref || > const step = 1, axis = 'both' > = options || > const [coords, setCoords] = React.useState( x: Infinity, y: Infinity >) const [dims, setDims] = React.useState( width: Infinity, height: Infinity >) const [size, setSize] = React.useState( width: Infinity, height: Infinity >) const initResize = event => if (!ref.current) return setCoords( x: event.clientX, y: event.clientY >) const width, height > = window.getComputedStyle(ref.current) setDims( width: parseInt(width, 10), height: parseInt(height, 10) >) > React.useEffect(() => // Round the size based to `props.step`. const getValue = input => Math.ceil(input / step) * step const doDrag = event => if (!ref.current) return // Calculate the box size. const width = getValue(dims.width + event.clientX - coords.x) const height = getValue(dims.height + event.clientY - coords.y) // Set the box size. if (axis === 'both') ref.current.style.width = width + 'px' ref.current.style.height = height + 'px' > if (axis === 'horizontal') ref.current.style.width = width + 'px' if (axis === 'vertical') ref.current.style.height = width + 'px' setSize( width, height >) > const stopDrag = () => document.removeEventListener('mousemove', doDrag, false) document.removeEventListener('mouseup', stopDrag, false) > document.addEventListener('mousemove', doDrag, false) document.addEventListener('mouseup', stopDrag, false) >, [dims, coords, step, ref, axis]) return initResize, size, cursor: cursor[axis] > >Make element resizable with vanilla JavaScript
div id="box" class="box">Click the element to make it resizable.div>const el = document.getElementById('box') el.addEventListener('click', init, false) const coords = x: Infinity, y: Infinity > let startWidth, startHeight function init() el.removeEventListener('click', init, false) el.classList.add('resizable') makeTheHandle() > function makeTheHandle() const handle = document.createElement('div') handle.classList.add('handle') el.appendChild(handle) handle.addEventListener('mousedown', initDrag, false) > function initDrag(event) coords.x = event.clientX coords.y = event.clientY startWidth = parseInt(window.getComputedStyle(el).width, 10) startHeight = parseInt(window.getComputedStyle(el).height, 10) document.addEventListener('mousemove', doDrag, false) document.addEventListener('mouseup', stopDrag, false) > function doDrag(event) el.style.width = startWidth + event.clientX - coords.x + 'px' el.style.height = startHeight + event.clientY - coords.y + 'px' > function stopDrag() document.removeEventListener('mousemove', doDrag, false) document.removeEventListener('mouseup', stopDrag, false) >.box background-color: Pink; padding: 20px; position: relative; > .handle background-color: Black; bottom: 0; cursor: se-resize; height: 10px; position: absolute; right: 0; width: 10px; >I would use the native CSS solution whenever possible, and then fallback to a JS solution if I have design or accessibility needs that are not met by the native resize .
There are also resizing sensors out there, that detect resizing and return the dimensions etc. Here’s just few first ones I found with a quick search:
Thanks for reading. Hope this was helpful.