Hi,
I need to adjust the width of a container when another container is changed. I have a sticky container that contains a list and Gallery with a specific count. The container under it has the same structure. The bottom contain is set to scroll vertically (using "Table-Wrap" CSS) when it exceeds a height. When this happens the structure in the bottom container become slight narrower due to the scroll bar showing up. This throws off the alignment with the top container.
I know how to adjust the top containers "margin-right" using style when an event happens.
How can I trigger an event when the bottom container exceeds a height and the scroll bar appears?
Something like, if the "Table-Wrap" container is greater than 500 px then set a local variable to true.
Here is a picture of when the "Table-Wrap" causes the scroll to appear.
Hope this make sense.
Thanks,
Glenn
Hi @Glenn Southward,
You can use overflow-y: overlay; property of the CSS on the bottom container. It will This will make the scrollbar appear only as an overlay, thus not affecting the width of your gallery container.
Edit: above CSS property is deprecated. You can use below CSS on the top container, it will adjust the top container for the scrollbar width and your both containers will be aligned:
Hope this helps!
Hi Mohd,
The " overflow: auto; scrollbar-gutter: stable; " worked perfectly. Simple and easy.
Thanks,Glenn
Hey @Glenn Southward
In this case, you have to try the js -
function checkContainerHeight() {
var tableWrap = document.getElementById('TableWrapId'); // Replace with the actual ID of your Table-Wrap container
var topContainer = document.getElementById('TopContainerId'); // Replace with the actual ID of your top container
if (tableWrap.scrollHeight > 500) { // Check if height exceeds 500px topContainer.style.marginRight = '17px'; // Adjust the top container's margin
} else {
topContainer.style.marginRight = '0px'; // Reset margin if height is less than 500px } } // Run the function on page load and when resizing the window.onload = checkContainerHeight; window.onresize = checkContainerHeight;
this was helpful for you,
thanks
Hi Vaishali,
Thanks for the reply and information.