JQuery ui изменение размера из верхних ошибок

Question

Когда я пытаюсь изменить размер элемента сверху (и даже если он похож на изменение размера), я замечаю, что нижняя сторона изменена.

HTML:

<div class="resizeme" style="background:yellow;">Resize me from the top</div> 

JS

$(".resizeme").resizable({ 
    handles: "n,s,e,w" 
}); 

jsfiddle:

http://jsfiddle.net/mody5/4x3r8vsq/

Как я могу исправить это?

Answer 1

При изменении размера вы меняете высоту и ширину, вы не меняете способ размещения или выравнивания содержимого внутри изменяемого размера элемента.

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

Попробуйте это:

jsFiddle

$(document).ready(function() { 
 
    $(".resizeme").resizable({ 
 
    handles: "n,s,e,w" 
 
    }); 
 
});

.resizeme { 
 
    position: relative; 
 
    top:20px; 
 
    background: yellow; 
 
    padding: 6px; 
 
    height: 100px; 
 
    width: 200px; 
 
} 
 
#top { 
 
    position: fixed; 
 
    top: 28px; 
 
    background: red; 
 
} 
 
#bottom { 
 
    position: fixed; 
 
    bottom: 60px; 
 
    background: blue; 
 
}

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 

 
<div class="resizeme"> 
 
</div> 
 
<span id="top">Resize me from the top</span><span id="bottom">Resize me from the bottom</span>