jui-ui icon indicating copy to clipboard operation
jui-ui copied to clipboard

autocomplete dropdown position issue

Open jihoonys82 opened this issue 7 years ago • 2 comments

안녕하세요.. JUI 자동완성 사용할때 드롭다운이 제가 원하는 위치가아니라 다른 곳으로 가는 문제가 있네요. 혹시 해결방법 도움을 받을 수 있을까요?

<style> 
/* issue form */
.issue-form-row {
	width: 		100%;
	margin:		1em;
}
.issue-form-row .issue-form-label {
	display: inline-block;
	width: 		15%;
	margin-right: 5px;
}
.issue-form-row .issue-form-input {
	width: 		60%;
}
</style>

<div id="assign" class="issue-form-row">
	<label for="assignee" class="issue-form-label">담당자</label>
	<input type="text" name="assignee" id="assignee" class="input issue-form-input" />
	<script data-jui="#assign" data-tpl="words" type="text/template">
    		<div class="dropdown">
       		 	<ul>
            			<! for(var i = 0; i < words.length; i++) { !>
           				<li><!= words[i] !></li>
           			<! } !>
        		</ul>
   		</div>
	</script>
</div>
<script>
//assignee autocomplete
jui.ready([ "ui.autocomplete" ], function(autocomplete) {
	assign = autocomplete("#assign", {
        target: "#assignee"
        , words: ["2글자 이상 입력하세요."]
    });
	
	$("#assignee").keyup(function() {
		var name = document.getElementById("assignee").value;
		if(name.length>0) {
			
			// Querystring null값인경우에 대한 예외처리
			var projId = $("select#projectId").val();
			
			if(projId == 0 ){
				return false;
			}
			
			$.ajax({
				type:"post"
				, url: "/issue/getMembers"
				, data: { "name" : name ,"projectId" : projId }
				, dataType: "json"
				, success: function(data){
					assign.update(data.name);
				}
				, error : function(e){
					console.log("----error----");
				}
			});
		}
	});
});
</script>

jihoonys82 avatar Nov 07 '18 08:11 jihoonys82

답변이 늦었습니다. 일단 두가지 정도의 방법이 있을 것 같습니다.

  1. autocomplete 옵션 중에 dx, dy를 사용하여 위치를 조정하는 방법
  2. assign 엘리먼트의 부모 엘리먼트의 position을 relative로 잡는 방법

시도해보시고 문제가 있다면 질문주세요!

seogi1004 avatar Nov 12 '18 04:11 seogi1004

답변 감사드립니다!!! 일단 1번은 잘 됩니다만... 화면 사이즈가 바뀔때마다 다 바뀌어서 .. 저희가 반응형 웹은 아니지만 해상도마다 위치가 달라지기에 사용하기 어렵습니다. 2번은 안됩니다! 어디에 relative 를 달더라도.. 위치는 변하지 않네요..

jihoonys82 avatar Nov 12 '18 13:11 jihoonys82