Question

I have a webpage which worked well until I added the following HTML and CSS around it:

HTML:

<div class="content">
    <div class="inner_content">
        <!-- old HTML within these 2 div tags worked find before adding these 2 new div tags -->
    </div>
</div>

CSS:

.content
{
    background:#BBBBBB;
}

.inner_content
{
    width:993px;
    margin:auto;
    padding:10px 0px 0px 10px;
    background:#AAAAAA;
}

Strange effect:

You can see the “strange effect” happening in this jsfiddle.

If you click any div which contains a (c), you will notice a little dropdown appear. If you then attempt to move a widget by dragging the header of the widget, watch what happens to the dropdown that appeared by clicking the (c)

This didn’t happen before I added the above HTML and CSS.

Screenshots:

Here are some screenshots to show the problem:

Dropdown looks fine here:

Click to enlarge.

Moving widget with dropdown enabled with old HTML, dropdown moves correctly with widget:

Click to enlarge.

Moving widget with dropdown enabled with new divs/css added, dropwdown moves incorrectly with widget:

Click to enlarge.

Question:

Is there a way to correct it without losing the effect the HTML and CSS adds to the page, without causing the dropdown to do strange things?

Answer 1

When you start dragging the .widget, jQuery-UI adds a style of position: absolute; to that .widget element which is removed when dragging stops. That’s what’s causing the dropdown to jump position.

To fix, add position: relative; (position: absolute; will also work) to the styles for .widget and re-evaluate your positioning arithmetic. I would suggest:

$dd.css({
    top: $nav3.outerHeight()+10,
    right: 10
});

You may need to increase the z-index of .dropdown as well.

http://jsfiddle.net/mblase75/RrpGr/14/

There are many other optimizations that can be done, but this should be sufficient to solve your problem.