CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
John Koerner
John Koerner

Reputation: 38077

Resizable Div in Chrome Causes a Content Shift When Zoomed

I am using the Jquery UI resizable plugin. When a resize occurs I update another div with the appropriate offset to maintain its position. This all works fine in Chrome when zoomed at 100%. If I zoom to 90% sometimes the table within the second div shifts down below the first div.

HTML:

<div>
    <div class="left"></div>
    <div class="right">
        <table><tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
            <tr><td>Blah</td></tr>
        </table>
    </div>
</div>

Javascript:

$(".left").resizable({
    resize: function ()
    {
        $(".right").css({marginLeft:$(this).width() + "px"});
    }
});​

​ CSS:

div
{
  display:block
  position:absolute;
}
.left
{
  width:99px; 
  height:500px;
  background-color:gray;   
  display:block;
  float:left;
  position:relative;
}
.right
{
    margin-left:99px;
    background-color: blue;
    display:block;
    position:relative;
}

table
{
    width:100%;
}

My question is, how do I properly calculate the left margin for the .right div?

To reproduce the problem, zoom chrome to 90% and resize the left element in this fiddle: http://jsfiddle.net/johnkoer/FyE6f/45/

Upvotes: 0

Views: 1155

Answers (1)

user1289347
user1289347

Reputation: 2407

http://jsfiddle.net/FyE6f/55/

(it looks like just setting the overflow to auto might work just as well as the code below)

$(".left").resizable({
    resize: function ()
    {
        $(".right").css({overflow:"hidden"});
        $(".right").css({marginLeft:$(this).width() + "px"});
    },
    stop: function ()
    {
        $(".right").css({overflow:"auto"});
    }
});​

Upvotes: 2

Related Questions