Currently immersed in my first ASP.net/HTML/CSS Application, I am exploring the realm of draggable panels using the Ajax-Control-Toolkit. So far, it's been a successful endeavor as I have managed to implement a single panel into my application!
As depicted in the following image: https://i.sstatic.net/BhSG7.png
Now, my objective is to seamlessly integrate the panels within their respective parent-containers, each outlined with borders (LEFT, TOP, and BOTTOM). The CSS settings for the children-panels are as follows:
.dragpanel-left {
top:0px;
left:0px;
width: 50%;
height: 50%;
}
However, the issue arises when the CSS settings are overridden by element.style{}, despite attempts to use !important, which unfortunately restricts resizing and movement of the panel.
Seeking guidance on a potential solution to this dilemma. Is there a method to apply "use !important once" tag or a similar approach, allowing the panel to be initially placed within its parent container before being freely manipulated?