I have created a series of divs structured like this:
<div id="body_container">
<div id="top_body">
</div>
<div id="bottom_body">
</div>
</div>
Additionally, I have implemented the following function:
$(function() {
$("#top_body").resizable({handles: "s",
alsoResize: "#bottom_body"});
});
While the resizing feature is operational, a problem arises where #bottom_body is immediately assigned a fixed width (equal to its initial width) as soon as the resizing action begins. Both #top_body and #bottom_body are set to have a width of 100% using CSS, which I would like to maintain.
Is there a way to prevent this automatic width assignment? I aim to allow the width to adjust accordingly when the window size changes. However, the current issue results in the bottom div being fixed in width (unlike the top one), causing disruptions to my layout.
Ultimately, I am seeking methods that do not involve utilizing JavaScript handlers to manually reset the width back to 100% every time the resizable handle is used.