div를 확장하여 모든 플로팅 요소를 포함 할 수 없음

Question

나는 (여전히 변환 도중에) Angular 만 사용하도록 부트 스트랩 날짜 모듈을 변환했습니다. Here is the demo page with the behavior I want to fix.

"날짜 범위 선택 도구"아래의 입력 필드를 클릭하여 daterangepicker를 확인하십시오. 나는 당신이보고해야하는지의 스크린 샷을 첨부했습니다 :

난 데 문제는 래퍼 (div.daterangepickerdropdown-menu.opensright.ltr.show 캘린더가) 폭으로 설정되어 있다는 것입니다 : auto이지만 세 개의 자식 요소, 범위, 왼쪽 달력 및 오른쪽 달력은 왼쪽으로 부동으로 설정됩니다. 웬일인지 그들은 수직으로 겹치기 위해 포장을 끝내고, 왜 그들이 수평으로 나란하지 않은지 알 수 없다. 오버플로 설정 : 래퍼에 숨겨진 아무것도 지우지 않고 재생하려고 시도했지만 아무 것도 작동하지 않는 것 같습니다. 나는 css 규칙을 가지고 놀고있는 크롬 디버거와 함께 4 시간 이상을 보냈다. 그리고 3 개의 자식 요소를 모두 수평으로 놓는 데 필요한만큼 넓힐 래퍼를 얻을 수 없다.

this의 모양을 비교하면 다음과 같습니다.

Answer 1

너비가 정의 된 클래스 col-md-4 인 div 내에서 드롭 다운 메뉴를 중첩했습니다.

작업 데모가이 열 외부에 드롭 다운 메뉴를 배치했습니다.

절대적으로 위치 지정 중이지만 여전히 열의 최대 너비를 상속합니다. (당신은 드롭 다운 메뉴 너비를 50 %로 설정하여 이것을 볼 수 있습니다)

HTML 구조를 변경하고 드롭 다운 메뉴를 데모와 비슷한 방식으로 배치하거나 고정 된 설정을 사용하여 너비를 무시함으로써이를 해결할 수 있습니다 자식 요소들에 적절하게 맞을 것이다. width: 170%. 날짜 피커는 그것에서 속성을 상속하지 않도록 당신은 위의 요소에서 position-relative를 제거해야

<div class="col-md-4 col-md-offset-2 demo"></div> 

:

Answer 2

여기서 문제는 다음과 같은 컨테이너입니다.

또는 요소 바로 위에 <div class="row"></div> 요소에 position: relative을 적용하고 그에 따라 날짜 선택 도구를 정렬 할 수 있습니다.