странная ошибка с jquery ui resizable

Я играю с jQuery UI, и я заметил странную ошибку. Когда я нажимаю кнопку, которая делает div изменчивым, div перемещается в позицию ниже этой кнопки.странная ошибка с jquery ui resizable

resizable.html:

<html> 
    <head> 
     <link href="my.css" rel="stylesheet" type="text/css"/> 
     <link href="jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="jquery-ui.js"></script> 
     <script> 
     function makeResizable() { 
      $("#divRes").resizable(); 
     } 
     </script> 
     <style> 
     </style> 
</head> 
<body> 
     <br><br><br><br><br><br><br><br><br><br> 
     <button onclick="makeResizable();">Make Resizable</button> 
     <div id="divRes" class="MyDiv"></div> 
</body> 
</html>

my.css:

.MyDiv { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
}

Так как только я нажимаю кнопку грима изменяемой, то ДИВ становится изменяемым, но она также перемещается вертикально ниже кнопки.

Странная часть заключается в следующем: Если удалить CSS из my.css и поместить его в линию между

<style> 
.MyDiv { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
} 
</style>

ИЛИ если я изменить декларацию делений от:

<div id="divRes" class="MyDiv"></div>

<div id="divRes"></div>

и my.css к

#divRes { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
}

НОМЕР НЕ ПРОСИТ.

Но, конечно, это и нежелательно, и глупо. Проблема не может быть воспроизведена в jsfiddle, потому что очевидно, что все css являются встроенными. Я могу загрузить файлы в Интернете в обеих версиях, если это необходимо.

JQuery версии:

JQuery UI - v1.8.20 - 2012-04-30

JQuery v1.7.2 jquery.com | jquery.org/license

Заранее благодарим за любой ввод.

EDIT: только что протестировал его с помощью jquery-ui 1.30.3 и jquery 1.9.1 (последний). проблема сохраняется, поэтому она не из-за старой версии.

EDIT2: Я загрузил файлы здесь http://speedy.sh/eBPea/resizable.zip

resizable.htm: демонстрирует проблему

resizable2.htm: проблема не появляется, если не использовать классы CSS (не a опция)

resizable3.HTM: проблема не появляется, если я включаю классы CSS в HTML файл (не вариант)

источник

2013-07-23 MIrrorMirror

Не заявить очевидное, но у вас есть 'DOCTYPE' заявление в вашем HTML файле? Ваш пример кода здесь отсутствует. – Uooo

вы сможете воссоздать в http://jsfiddle.net/ просто поместите URL-адреса ваших файлов CSS и JS-файлов в External Resources – apaul

Кажется, проблема связана с CSS.

изменяемый плагина добавить класс ui-resizable к вашему элементу, и он приходит с этим стилем по умолчанию в JQuery UI:

.ui-resizable { 
    position: relative; 
}

Это вызывает проблемы, как ваш CSS имеет position: absolute и переопределяется. Для предотвращения этой проблемы добавьте это правило в файл CSS:

.MyDiv.ui-resizable { 
    position: absolute; 
}

или сделать изменение .MyDiv определение как:

.MyDiv { 
    position: absolute !important; 
}

источник

2013-08-07 12:34:26

Звучит разумно. '.ui-resizable' и' .MyDiv' имеют одинаковую специфичность, поэтому порядок объявления решает победителя. Поскольку 'jquery-ui.css' добавляется * после *' my.css', '.ui-resizable' приходит * после *' .MyDiv' и таким образом выигрывает, что приводит к относительному позиционированию. '.MyDiv' выигрывает, если объявление стиля помещается (inline) после' jquery-ui.css' (порядок объявления), или правило использует идентификатор вместо класса (более высокая специфичность). –

Он должен работать, как вы можете видеть в этом jsfiddle:

HTML

<button id="resizeBtn">Make Resizable</button> 
<div id="divRes" class="MyDiv"></div>

$('#resizeBtn').click(function() {  
    $("#divRes").resizable(); 
});

CSS

.MyDiv { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
}

http://jsfiddle.net/GfczQ/

источник

2013-07-23 20:54:10

, проблема не может быть реплицирована в jsfiddle, только с реальными файлами. – MIrrorMirror

+1 стоит и тратить время на запрос – Akki619

У меня была такая же проблема. Ни один из ответов не работал для меня.

Ширина моего div начиналась с 200 пикселей, и когда я перемещал мышь для изменения размера с востока, ширина сразу же уменьшалась до 170 пикселей. Я проследил проблему к линиям 302 и 303 в resizable.js изменила el.width() к el.outerWidth()

Lines:

this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.outerWidth(), height: el.height() }; 
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.outerWidth(), height: el.height() };

источник

2015-07-02 01:17:34 DanielRavina

странная ошибка с jquery ui resizable

ответ

Смежные вопросы