jQuery.uploadfile ajax-file-upload-filename 영역 수정

jQuery.uploadfile ajax-file-upload-filename 영역 수정

드래그 & 드랍이 되는 jQuery plugin을 찾다가 jQuery.uploadfile 을 사용하게 되었습니다.

파일명 + 용량 표시가 영역을 벗어나는 문제가 발생합니다. 작은 공간에서 사용하려 하였기에 문제가 되었습니다.

해당 영역을 살펴보면, 주어진 텍스트 보다 더 긴 영역을 차지하고 있음을 알 수 있습니다.

레이아웃을 살펴보면 300 X 20 임을 확인할 수 있습니다.

넓이가 300px으로 설정된 것을 확인 할 수 있습니다.

uploadfile.css 파일에서 300px 로 설정된 것을 확인 할 수 있습니다.

.ajax-file-upload-filename {
  width: 300px;
  height: auto;
  margin: 0 5px 5px 0px;
}

width: 300px; 를 width:100% 로 수정합니다.

영역을 벗어나지 않고 안쪽으로 텍스트가 나오는 것을 확인 할 수 있습니다.