jui-ui
jui-ui copied to clipboard
autocomplete dropdown position issue
안녕하세요.. 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>
답변이 늦었습니다. 일단 두가지 정도의 방법이 있을 것 같습니다.
- autocomplete 옵션 중에 dx, dy를 사용하여 위치를 조정하는 방법
- assign 엘리먼트의 부모 엘리먼트의 position을 relative로 잡는 방법
시도해보시고 문제가 있다면 질문주세요!
답변 감사드립니다!!! 일단 1번은 잘 됩니다만... 화면 사이즈가 바뀔때마다 다 바뀌어서 .. 저희가 반응형 웹은 아니지만 해상도마다 위치가 달라지기에 사용하기 어렵습니다. 2번은 안됩니다! 어디에 relative 를 달더라도.. 위치는 변하지 않네요..