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

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/

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

1
medBouzid 23 Май 2015 в 16:00

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>
0
apaul 24 Май 2015 в 03:59