Home/ Questions/Q 8319377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T22:18:30+00:00

Ok I have a draggable div #reportBox_1. When I drag this div, its width

  • 0

Ok I have a draggable div #reportBox_1. When I drag this div, its width is increased to about 3X its original width. Now this #reportBox_1 has a width of 29%, but it seems that the expansion is getting inherited from two levels up, from the #wrapper style.

This is actually part of a much bigger page, but cutting code down to narrow down to the problem, I noticed that this problem only occurs when I have a strict DOCTYPE definition. Below is the same code I’m using. If I remove the DOCTYPE definition, the drag width problem is resolved.

Now I would like to keep this strict DOCTYPE definition since removing it for some reason IE9 will no longer display my round borders when using the style “border-radius”, but I guess this is another question.

Now this draggable width expansion problem occurs in both IE8 and IE9. Can someone please help on this. I’m new to jQuery. Below is my code:

UPDATE: when I put my whole page back to normal and removed the DOCTYPE definition, problem was still occuring. I then removed the definition tag and it now worked. Below is meta definition I was using.

   <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Not sure why this causes problems in jQuery draggable, but it seems that is a combination of both the DOCTYPE and meta tag that are causing the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<style type="text/css">
body{
    height:800px;
    background-color: #CCCCCC;
    overflow: auto;
}

.mainWrapper{
    width: 1300px;
    height: 800px;
}  


.directoryContainer{
    width: 40%;
    height: 800px;
    background-color: #CCCC33;
    float: left;
} 


.preSelectedReportDisplayBox{
    float: left;
    height: 120px;
    width: 29%;
    background-image: url(picts/reports/report_display_box.jpg);
    text-align: center;
    margin-left: 21px;
    padding-top: 20px;
    border: 1px solid;
    border-color: #3399FF;
}



</style>  


<link type="text/css" href="scripts/jqueryui_1.8/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />  
<script type="text/javascript" src="scripts/jqueryui_1.8/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jqueryui_1.8/js/jquery-ui-1.8.21.custom.min.js"></script>


<script type="text/javascript">

    function initialize(){
        makeReportsDraggable(); 
    }   


    function makeReportsDraggable(){

            $('#reportBox_1').draggable({
                helper: 'clone'
            });

    }

</script>   

</head> 
<body onload="initialize()">

    <div id="wrapper" class="mainWrapper">
        <div id="directoryContainer" class="directoryContainer">



                    <div id="reportBox_1"  class="preSelectedReportDisplayBox">

                      Box1

                    </div>


        </div>              




    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The parent DIV was a percentage width, like 30%. I just change the width to pixels. Not sure if my DIV design was messed up but setting it to a fixed size fixed the problem. I guess this will work for me for now… The DOCTYPE and meta tag stuff were not changed.

    • 0