[CSS][Bootstrap] multiselect 위치 조정하기

multiselect를 datatables 안의 <td>에 넣어서 사용을 하는 상황.

multiselect를 클릭하여 dropdown menu가 펼쳐질때 <td>의 아래에 펼쳐지게 하는 옵션을 찾아보았는데,

기본적으로는 원래 아래에 펼쳐지는건데 영역에 따라 위치가 변하고 있는거라, 

따로 CSS로 설정을 해줘야하는 상황.

그런데 js로 css를 설정해주려고 했는데,

$(td).on('click', () => {
    // 드롭다운 메뉴가 확장될 때
    if (!$(td).find('div.multiselect-container').hasClass('show')) {
        $(td).find('div.multiselect-container').css({
            'position': 'absolute !important',
            'top': '100% !important',
            'left': '0 !important'
        });
    }
});

 

기존에 이미 css 설정되어있는것과 충돌하는지 적용이 안되어서,

!important를 사용하여도 원하는 결과를 얻지 못한다면, JavaScript 코드에서 직접 스타일을 설정하는 방법 대신 CSS 파일에 스타일을 추가하여 해결할 수도 있습니다.

라는 검색결과를 얻어서 css파일에 추가해주었다.

div.multiselect-container.show {
    position: absolute;
    top: 100% !important;
    left: 0 !important;
}

 

그랬더니 해결!