JQuery UI изменить размер вопрос

Простая ситуация - два div и один div, который является полем. Внешний div прокручивается. . Размер div.box изменен (w, e). Когда я пытаюсь изменить размер справа налево, div.box сжимается до ширины: 0px.JQuery UI изменить размер вопрос

Живой пример здесь: code

Я уже прочитал все о Jquery-интерфейсе изменяемого, но не могу найти решение для меня. Буду признателен за любую помощь.

HTML:

<div class="container-scroll"> 
    <div class="container"> 
     <div class="box"></div> 
    </div> 
</div>

CSS:

.container-scroll { 
    display:block; 
    width:500px; 
    height:100px; 
    overflow:scroll; 
    border:1px solid #666; 
} 
.container { 
    display:block; 
    position:relative; 
    width:1000px; 
    height:100px; 
    padding:20px 0;  
    background-color:#eee; 
} 
.box { 
    display:block; 
    position:absolute; 
    width:1000px; 
    left:0; 
    /*right:0; */ 
    height:50px; 
    background:red; 
}

Javascript:

$('.box').resizable({ 
    containment: 'parent', 
    handles: 'w, e', 
    grid: [10,10] 
});

источник

2014-02-06 Antihero

Удаление вашей локализации вызова устраняет проблему, и это излишним так или иначе, насколько я могу видеть:

$('.box').resizable({ 
    handles: 'w, e', 
    grid: [10,10] 
});

EDIT

Принимая во внимание ваш комментарий, то, лучше всего, вероятно, использовать опцию «MaxWidth» и установите это на ширину вашего контейнера, как так (используя ширину в скрипкой как пример).

$('.box').resizable({ 
    maxWidth: 1000, 
    handles: 'w, e', 
    grid: [10,10] 
});

источник

2014-02-06 16:23:55 Swires

Да. Удаление «сдерживания» решает проблему с неожиданным свертыванием. Но мне нужно «сдерживание», потому что я хочу, чтобы div.box не превышал границы div.container (это обязательно!). – Antihero

Хорошо, посмотрите обновленный ответ, это должно позволить вам использовать упомянутые функции. – Swires

Да, снова вы правы, но maxWidth не защищает div.box до границ div.container. Например, вы можете попробовать сначала изменить размер левой стороны, а затем изменить размер правой части div.box. Я начинаю думать, что это основная проблема jquery-ui resizable. Вероятно, изменяемые размеры не позволяют точно рассчитать сдерживание, когда некоторые из родителей прокручиваются. – Antihero

Я нашел обходной путь с паразитами div.box-обертку, он не идеален, но это своего рода решение.

HTML:

<div class="container-scroll"> 
    <div class="container"> 
     <div class="box-wrapper"> 
      <div class="box"></div> 
     </div> 
    </div> 
</div>

CSS

.box-wrapper { 
    width:100%; 
    height:50px; 
    background-color:#fc3; 
}

Идея заключается в следующем: родительский контейнер должен находиться в нормальном визуализации потока, не является абсолютным или относительным позиционируются. Обновленная версия: http://jsfiddle.net/sdoichev/Fac9m/

На данный момент он выполнит эту работу.

источник

2014-02-07 12:56:10 Antihero

Его работая отлично когда я удалял сдерживание. Я думаю, что сдерживание остановило его от изменения размера. http://jsfiddle.net/4awJm/15/

$('.box').resizable({ 
 
    
 
\t handles: 'w, e', 
 
    grid: [50,10] 
 
});

.container-scroll { 
 
    display:block; 
 
    width:500px; 
 
    height:100px; 
 
    overflow:scroll; 
 
    border:1px solid #666; 
 
} 
 
.container { 
 
    display:block; 
 
    position:relative; 
 
    width:1000px; 
 
    height:100px; 
 
    padding:20px 0;  
 
    background-color:#eee; 
 
} 
 
.box { 
 
    display:block; 
 
    
 
    left:0; 
 
    right:0;  
 
    height:50px; 
 
    background:red; 
 
}

<div class="container-scroll"> 
 
    <div class="container"> 
 
     <div class="box"></div> 
 
    </div> 
 
</div>

источник

2015-12-23 20:34:48

JQuery UI изменить размер вопрос

ответ

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