One question arises: could the scrollWidth value possibly change even if the content remains constant, but the width of the div is altered (such as during a window resize event)? It seems unlikely, yet I am experiencing unexpected issues.
If it should indeed change, then there seems to be an issue with the scrollWidth not updating correctly when the div width changes.
In my scenario, there is a situation where a child div's width is set to the scrollWidth of its parent div through jQuery. There is also a panel placed adjacent to the parent div that can expand or collapse, resulting in changes to the parent div's width. Strangely, the scrollWidth of the parent div does not adjust accordingly when the panel opens or closes (which is somewhat understandable). However, upon triggering events like a window resize, the child div fails to resize properly based on the updated parent div width, leading to overflow issues (as depicted in the image). The scrollWidth property only updates when the parent element is toggled off/on with the #openAttrTable button in this case, and whether the panel is displayed affects the initial width of the parent div.
Essentially, I require the scrollWidth property to dynamically update every time the width of the parent div is modified, regardless of the div already being instantiated.
Several buttons manage the opening and closing of the side panel and attribute table, setting the scroll width accordingly based on their states. Upon clicking #display-map-info, manual adjustments are necessary by adding or subtracting pixels from scrollWidth to ensure proper alignment of the drag bar within the available space. The direct assignment of scrollWidth without pixel adjustments causes the drag bar to overlap other elements within the div (refer to the image).
// Script for animating the layers panel slide-out
$('#display-map-info').click(function () {
$('#map-functions').toggle("slide", { direction: "right" }, 500);
$('#map-functions').toggleClass("visible");
// Adjusts the width if the attribute table is open and the layers panel is expanding
if ($("#attribute-table").hasClass("open") && $("#map-functions").hasClass("visible")) {
$("#attribute-table").animate({ width: '-=250px' }, 500);
var width = $("#attribute-table")[0].scrollWidth;
$("#attrTable-handle").css("width", width);
$("#attrTable-handle").animate({ width: '-=250px' }, 500);
}
// Adjusts the width if only the attribute table is open
else if ($("#attribute-table").hasClass("open")) {
$("#attribute-table").animate({ width: '+=250px' }, 500);
var width = $("#attribute-table")[0].scrollWidth + 250;
$("#attrTable-handle").css("width", width);
}
});
// Opens/closes the attribute table on button click and adjusts the width accordingly
$("#openAttrTable").click(function () {
if ($("#map-functions").hasClass("visible")) {
$("#attribute-table").css("width", "100%").css("width", "-=300px");
$("#attribute-table").toggleClass("open");
$("#attribute-table").toggle();
var width = $("#attribute-table")[0].scrollWidth;
$("#attrTable-handle").css("width", width);
}
else {
$("#attribute-table").css("width", "100%").css("width", "-=50px");
$("#attribute-table").toggleClass("open");
$("#attribute-table").toggle();
var width = $("#attribute-table")[0].scrollWidth;
$("#attrTable-handle").css("width", width);
}
});
// Resize function to adjust the attribute table width based on the panels' states
$(window).resize(function () {
if ($("#map-functions").hasClass("visible") && $("#attribute-table").hasClass("open")) {
$("#attribute-table").css("width", "100%").css("width", "-=300px");
var width = $("#attribute-table")[0].scrollWidth;
$("#attrTable-handle").css("width", width);
}
else if ($("#attribute-table").hasClass("open")) {
$("#attribute-table").css("width", "100%").css("width", "-=50px");
var width = $("#attribute-table")[0].scrollWidth;
$("#attrTable-handle").css("width", width);
}
});
https://i.sstatic.net/OXK2b.jpg
#map-functions {
position: absolute;
display: flex;
flex-direction: column;
width: 250px;
top: 115px;
right: 50px;
bottom: 0;
padding: 9px;
background-color: #fff;
border: 5px solid orange;
overflow-x: hidden;
}
#attribute-table {
display: none;
position: fixed;
left: 0;
height: 250px;
bottom: 0 !important;
top: auto !important;
padding-top: 7px;
background-color: white;
z-index: 31;
}
#attrTable-handle {
height: 5px;
background-color: orange;
top: 0;
}
HTML Structure:
<div class="visible" id="map-functions"></div>
<div id="attribute-table">
<div id="attrTable-handle"></div>
</div>