[문제] jQuery resizable 첫 번째 요소에서만 작동 해결

jQuery resizable은 첫 번째 요소에서만 작동하고 두 번째 요소에서는 작동하지 않는 문제. 의도는 동적으로 div 요소의 width를 조절하는 것. 총 세 개의 div의 너비를사용자가 마우스를 드래그함에 따라 조절해주는 것. ● 해결 시간 : 하루 반나절..ㅋ

 

 

추론 및 해결하는데 시도한 방법들

---

• 조절 하는 요소 옆의 요소가 액티브엑스여서 그런가? -> 옆에 다른 요소에 resizable을 줬을 때에는 문제없이 작동함

• 일반 div는 잘 작동하는걸로 보아 스크롤 문제인가 생각하기 시작. overflow: hidden이어야 되는데 내용이 많은 document적인 요소라 scroll 속성을 줘야하는데 일부 커뮤니티에서 hidden 속성을 줘야한다고 함. start/ stop에 따라 overflow: hidden overflow:scroll을 전환해줌 -> 원인이 아님

• ui-resizable-handle ui-resizable-e의 위치도 중요함. 보통 자동으로 등록되나 무언가 문제가 있다면 등록이 안되서 수동으로도 등록해줬는데 보통은, 그럴필요가 없다.

• 여러개의 resizable이라서 handles이 중복 동작할지 모르니 resizable 속성에 handles: "e" 이거를 특정한 요소로 지정 (handles: {e: "div.splitter1"} -> 문제 아님

• 어떤 커뮤에서는 요소가 여러개면 각각 handles의 방향을 다르게 줘야 된다고 함 -> ui-resizable-handle ui-resizable-e 이렇게 줌 -> 딱히 변화없음

• 같은 splitter 요소로 동작할 경우 반복문 (each) 등을 권장 -> 내 경우 이미 splitter id값부터 다르고 자꾸 사라지기 때문에 없애버리고 ui-resizable-handle ui-resizable-e 로만 테스트하는 중이었음

• alsoResize 과 containment: "document"  을 이용하라는 조언 -> 작동법을 정확히 몰라서 대입 실패. 사용하니 익스플로러가 콘솔창으로 에러를 99+ 뱉으며 괴로움을 토로함.  

• 조절할 요소를 한번 더 div 요소로 감싼 후 그 요소를 조절해보라는 답변을 봄. 이게 해결방법은 아니었지만 해결법까지 바로 유추를 할 수 있었음. 신난다!

 

 

해결 및 찾은 원인

---

• 조절할 요소의 overflow의 속성을 auto로 두면 resizable 만나고 혼란스러워함. scroll 속성을 사용해야 한다면 css에 그냥 넣어둬도 상관없음

• 부트스트랩과 같이 사용하면서 동적으로 준 html 요소의 col 속성이 문제가 됨. 삭제하고 css에 width 초기값을 넣어줌 ---> 해결

• 기타 $('조절할 요소').resizable({ ...  resize: function(3, ui){ 여기 안에 각각의 패널을 조절하는 코드 }  });  가 있었는데 삭제했음. 자동적으로 잘 잡는 듯 하다.

• 세로조절, 가로조절 모두 구현된다.

 

 

 

추가 문제

---

1. 처음 띄울 때는 되는데, 두 번째 div 부분부터 리사이징이 안된다. s축 기준의 resizable은 여러번 잘 되는데 e축 기준은 잘 안됨

2. 처음에도 스크롤 내부에서 handle이 생기며 스크롤 내리면 스크롤 아래 부분에서는 안생긴다

-> 다시 해봐도 스크롤 없애든 아니든 같다. 스크롤 문제는 아님
-> 해결 : 리사이징 하려는 div의 안에 임의의 div를 생성해서 overflow: hidden;을 추가한다.
겉의 div에 스크롤을 쓸 수 있는 건 같으며 의도대로 작동한다. 

3. 다시 문제 발생. 영역이 축소된 상태에서 마우스를 뗄 경우 화살표가 나오지 않음 ---> 영역에 가려져서 그렇다

 

 

 

참고 사항

---

윈도우창의 크기 조절(자바스크립트 , 제이쿼리 방법)

 

 

 

느낀 점

---

resizable이 제이쿼리 UI 라이브러리 안에 있는 것인지도 이번에 알았다.
제이쿼리를 사용할 때 처럼 역시 자바스크립트와 css 파일 링크가 필요하다. 
아래처럼 이 요소가 resizable 적용이 가능한 요소인지 사전 체크할 수 있는 기능도 있다.

 

$(cp1).resizable({ disabled: true });
$(cp1).resizable("enable");

 

* 작업 순서 : 프레임 먼저
* 테스트 : 거꾸로 추론(이미 했던건데 설명을 못한 이유 : 더 체계적으로 캡쳐와 함께 기록해두자.)

 

 

 

느낀 후 실천

---

빨리 모던자바스크립트 책을 봐야겠다...
블로그 레이아웃도 내가 처음부터 다시 짜야지..