jQuery UI 크기 조정 가능 내 DOM 요소 이동

Question

머리말 :이 정확한 질문을하는 곳에서 stackoverflow를 검색하여 다른 여러 인스턴스를 찾았습니다. 나는 그들을 이해하려고 애썼지 만 나는 초보자이며 이것은 나에게 의미가 없다. 같은 질문을 다시 한 것에 대해 사과드립니다. 그러나 제시된 해결책은 효과가없는 것처럼 보입니다.

여기에 my jsfiddle입니다. 위쪽 가장자리 또는 오른쪽 상단 모서리를 드래그하면 div가 화면의 위쪽 가장자리로 이동하고 때로는 부분적으로 화면 밖으로 이동합니다.

HTML :

<div id='chat'> 
    <div id='content'></div> 
    <input id='field' type='text' value='',placeholder='' /> 
</div> 

CSS :

#chat { 
    background-color: rgba(0,0,0,0.8); 
    min-width: 400px; 
    min-height: 200px; 
    position: fixed !important; 
    bottom: 10px !important; 
    left: 10px; 
    padding: 5px; 
    color: white; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    -o-border-radius:5px; 
    -ms-border-radius:5px; 
} 

#content { 
    position: absolute; 
    overflow-y: scroll; 
    top: 5px; 
    bottom: 30px; 
    left: 5px; 
    right: 5px; 
    font-family: verdana; 
    font-size: 8pt; 
} 

#field { 
    position: absolute; 
    left: 5px; 
    bottom: 5px; 
    background-color: rgba(0,0,0,0); 
    color: white; 
    border-width: 1px; 
    outline: 0; 
    font-family: verdana; 
    font-size: 8pt; 
} 

JS/jQuery를는 :

window.onload = function() { 
    $('#field').each(function(){ 
     $(this).width($(this).parent().width()-4); 
    }); 

    $('#chat').resizable({ 
     handles: 'n, ne, e', 
     resize: function(event, ui) { 
      $(this).css({left:'10px'}), 
      $(this).css({bottom:'10px'}), 
      $('#field').width($('#field').parent().width()-4); 
     } 
    });  
    var handles = $('#chat').resizable('option', 'handles'); 
    $('#chat').resizable('option', 'handles', 'n, ne, e'); 
} 

Answer 1

용액 알았다. Jide's comment over here에 있습니다.

이 문제를 해결

{ 
    position: fixed !important; 
    top: auto !important; 
    bottom: 0 !important; 
}