locked
How to solve Position issue of div while resizing of Div. RRS feed

  • Question

  • User-147238865 posted

    Hii Experts;

    I am desginig a page where User can right click inside page and add Div dynamically and the Div is resizable and draggable. This thing I have done and it's working fine also.

    Bellow are code:-

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>DmeoDash</title>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/ContextMenu/jquery.contextMenu.js"></script>
        <script src="~/ContextMenu/jquery.ui.position.js"></script>
        <script src="~/Scripts/jquery-ui-1.11.4.js"></script>
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/ContextMenu/jquery.contextMenu.css" rel="stylesheet" />
        <link href="~/DashboardData/css/font-awesome.css" rel="stylesheet" />
        <link href="~/Content/themes/base/all.css" rel="stylesheet" />
        <link href="~/Content/themes/base/sortable.css" rel="stylesheet" />
    
        <script>
            var i = 1;
            var j = 1;
            var arr = [];
            var divId = "";
            var objdiv = "";
            var Pid = "";
            $(function () {
                  
                debugger;
                $.contextMenu({
                    selector: '#Sortdiv',
                    callback: PerformAction,
                    items: {
                        "add": { name: "Add Dashlate", icon: "fa fa-plus-square-o" },
                        "delete": { name: "Delet Dashlate", icon: "delete" },
                        "save": { name: "Save Dashlate", icon: "Edit" },
                        "sep1": "---------",
                        "quit": {
                            name: "Quit", icon: function () {
                                return 'context-menu-icon context-menu-icon-quit';
                            }
                        }
                    }
                });
    
            });
            function PerformAction(key, options) {
                debugger
             
                switch (key) {
                    case "add":
                        $("#Sortdiv").append("<div style='height:70px;width:111px;border:1px dotted;margin-left:4px;margin-top:8px;' class='col-xs-12 col-lg-3 resize' id='dash_" + i + "'><div style='width:100%;height:30px;background-color:#BEC3D2;border:1px solid;text-align:center'>Dashlet_" + i + "</div></div>");
                        
                        if (j == 4) {
                            j = 1;
                        }
                        else
                            j++;
    
                        i++;
                        break;
                    case "save":
                        SaveDashlate();
                        break;
                   
    
                }
                $(".resize").resizable({
                    containment: "#Sortdiv",
                    minHeight: 70,
                    minWidth: 111,
                    resize: function (event, ui) {
    
                    },
                    stop: function (event, ui) {
                        debugger;
                    },
                });
                $(".resize").draggable({
                    containment: "#Sortdiv", cursor: "move", backgroundcolor: "#EEEEEE",
                    drag: function () {
                  
                    },
                    stop: function (event, ui) {
                        
    
                    }, snap: true, helper: "original"
                });
            }
        
        
        </script>
        <style>
            #Sortdiv {
                height: 700px;
                width: 100%;
                border: 1px dotted #bfbdbd;
                overflow: auto;
            }
    
        </style>
    </head>
    <body>
        <div id="Sortdiv">
              //This the Main div where dynamic div are added.
        </div>
    </body>
    </html>

    In the Above code what i did is that i have created one main div i.e "Sortdiv" and added dynamic div inside it.

    But hear the problem is that when i am dragging div form one place to another then while resize of that div then other div also affected; which i don't want.

    Bellow is the Scenario :-

    Suppose i have added 3 div dynamically and id of three div are firstdiv, secondDiv and thirdDiv.

    Suppose i drag the firstDiv to last place i.e after thirdDiv i place the firstDiv then the problem is that while i am resizing that firstDiv then margin from left increasing for secondDiv and thirdDiv which i don't want , what i want is that if i am resizing firstdiv then next to firstdiv element only shifted not the previous div are.

    Hope you got clear picture what i am want to do; if you understand my scenario then please help me how to achieve this.

    If the explanation not clear then reply me.

    Friday, March 11, 2016 6:11 AM

Answers

  • User61956409 posted

    Hi SURYA_TECH,

    If you check the html markup, you will find that all “dash_*” elements (<div>) with relative position, you could try to override it with absolute position. The following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
        <style>
            #Sortdiv {
                height: 700px;
                width: 100%;
                border: 1px dotted #bfbdbd;
                overflow: auto;
            }
    
            .ui-resizable {
                 !important;
            }
        </style>
    
        <script>
            $(function () {
                $(".resize").resizable({
                    containment: "#Sortdiv",
                    minHeight: 70,
                    minWidth: 111,
                    resize: function (event, ui) {
    
                    },
                    stop: function (event, ui) {
                        debugger;
                    },
                });
    
                $(".resize").draggable({
                    containment: "#Sortdiv", cursor: "move", backgroundcolor: "#EEEEEE",
                    drag: function () {
    
                    },
                    stop: function (event, ui) {
    
                    }, snap: true, helper: "original"
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="Sortdiv">
                    <div style='height: 70px; width: 111px; border: 1px dotted; margin-left: 4px; margin-top: 8px;' class='col-xs-12 col-lg-3 resize' id='dash_1'>
                        <div style='width: 100%; height: 30px; background-color: #BEC3D2; border: 1px solid; text-align: center'>Dashlet_1</div>
                    </div>
    
                    <div style='height: 70px; width: 111px; border: 1px dotted; margin-left: 4px; margin-top: 8px;' class='col-xs-12 col-lg-3 resize' id='dash_2'>
                        <div style='width: 100%; height: 30px; background-color: #BEC3D2; border: 1px solid; text-align: center'>Dashlet_2</div>
                    </div>
    
                    <div style='height: 70px; width: 111px; border: 1px dotted; margin-left: 4px; margin-top: 8px;' class='col-xs-12 col-lg-3 resize' id='dash_3'>
                        <div style='width: 100%; height: 30px; background-color: #BEC3D2; border: 1px solid; text-align: center'>Dashlet_3</div>
                    </div>
    
                </div>
    
            </div>
        </form>
    </body>
    </html>
    

    The above will be with a new issue, three <div>s will be at a same position on left-top of page, but you could dynamically set top and left property when you create them.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 15, 2016 7:44 AM

All replies

  • User61956409 posted

    Hi SURYA_TECH,

    the problem is that when i am dragging div form one place to another then while resize of that div then other div also affected; which i don't want.

    Bellow is the Scenario :-

    Suppose i have added 3 div dynamically and id of three div are firstdiv, secondDiv and thirdDiv.

    Suppose i drag the firstDiv to last place i.e after thirdDiv i place the firstDiv then the problem is that while i am resizing that firstDiv then margin from left increasing for secondDiv and thirdDiv which i don't want , what i want is that if i am resizing firstdiv then next to firstdiv element only shifted not the previous div are.

    According to your code, we could find that you are using jQuery Resizable widget, you could try to find siblings <div> and  restyle <div> on stop event.

    http://api.jqueryui.com/resizable/#event-stop

    Best Regards,

    Fei Han

    Monday, March 14, 2016 6:58 AM
  • User-147238865 posted

    Thanks Fei Han for Reply.

    Actually I did not get correct solution; what i am asking is that suppose i have a div and i make the div as draggable as well as resizable; and i allow the user to drag anywhere in side my page and it's also working f9, but the problem started when i am making resizing the div. If first div drag to the last position and i am resizing the tat div then all other div are whose are left of that div they are shifting; tat's the problem.

    What i want is that the div which i am resizing that only increase the size and if any div present inside it's right then they are shifted not the left side div.

    I tried to trace the problem and what i got is that while dragging the div inside the page for logically the div changes it's position but physically the div is in position is same as at the creation time of div position; so while resizing it's the div which are present at the left are affected; what i think.
    So if you please execute my above code then after dragging you can get what actual problem i am facing.

    So if you got any idea to solve this problem then reply me.

    Thanks.

    Monday, March 14, 2016 2:10 PM
  • User61956409 posted

    Hi SURYA_TECH,

    If you check the html markup, you will find that all “dash_*” elements (<div>) with relative position, you could try to override it with absolute position. The following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
        <style>
            #Sortdiv {
                height: 700px;
                width: 100%;
                border: 1px dotted #bfbdbd;
                overflow: auto;
            }
    
            .ui-resizable {
                 !important;
            }
        </style>
    
        <script>
            $(function () {
                $(".resize").resizable({
                    containment: "#Sortdiv",
                    minHeight: 70,
                    minWidth: 111,
                    resize: function (event, ui) {
    
                    },
                    stop: function (event, ui) {
                        debugger;
                    },
                });
    
                $(".resize").draggable({
                    containment: "#Sortdiv", cursor: "move", backgroundcolor: "#EEEEEE",
                    drag: function () {
    
                    },
                    stop: function (event, ui) {
    
                    }, snap: true, helper: "original"
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="Sortdiv">
                    <div style='height: 70px; width: 111px; border: 1px dotted; margin-left: 4px; margin-top: 8px;' class='col-xs-12 col-lg-3 resize' id='dash_1'>
                        <div style='width: 100%; height: 30px; background-color: #BEC3D2; border: 1px solid; text-align: center'>Dashlet_1</div>
                    </div>
    
                    <div style='height: 70px; width: 111px; border: 1px dotted; margin-left: 4px; margin-top: 8px;' class='col-xs-12 col-lg-3 resize' id='dash_2'>
                        <div style='width: 100%; height: 30px; background-color: #BEC3D2; border: 1px solid; text-align: center'>Dashlet_2</div>
                    </div>
    
                    <div style='height: 70px; width: 111px; border: 1px dotted; margin-left: 4px; margin-top: 8px;' class='col-xs-12 col-lg-3 resize' id='dash_3'>
                        <div style='width: 100%; height: 30px; background-color: #BEC3D2; border: 1px solid; text-align: center'>Dashlet_3</div>
                    </div>
    
                </div>
    
            </div>
        </form>
    </body>
    </html>
    

    The above will be with a new issue, three <div>s will be at a same position on left-top of page, but you could dynamically set top and left property when you create them.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 15, 2016 7:44 AM
  • User-147238865 posted

    Thanks a lot Fei Han for reply;

    Yes solved that problem; only that position issue; really a small thing but to find it i face much difficulties.After your reply I google about css position value i.e to understand more deeply about position="relative" and position="absolute" and i find different type of view on this topic.

    Now i am trying to confirming you what i understand about this :-

    1) The left and top attribute only work when we give position as "absolute" or "relative",if we set position as fixed or inherit and apply top and left attribute then it won't work.

    2) Position absolute means the it's not come in order how it's created that means it's out of page flow; where ever we created but it's always comes on the first position and the left attribute value means from the starting position.

    For eg:- if we give div1 as left:100px then the left is calculated form the page initial point and again if we give another div left as 100px then it did not calculate the 100px from the first div left but it's calculate left from the page initial point that from where the first div left calculated.

    But In case of position relative it's happen in reverse order.

    3) In case of Position relative the div is added in a order as we define and the left value is calculated just where the div actual position when he created.

    Are my above understanding correct ?

    Again last thanks lot for your valuable time and reply me.

    Tuesday, March 15, 2016 1:57 PM