[datetimepicker] CSS에서 달력 표시 위치 충돌 해결

2940 단어 캘린더DatePickerDatetimePickerRailsCSS

매혹적인 일


bootstrap의datetimepicker를 이용하여 달력을 표시할 수 있지만 브라우저를 세로로 줄이면 위쪽 (제목) 에 표시되어 이 문제를 해결하지 못하고 하루를 낭비합니다.
참조 블로그: https://github.com/NetCommons3/NetCommons3/issues/200

이루고 싶은 일 [시위]


브라우저의 세로 폭이 충분하지 않으면 과도하게 위로 이동합니다
아래의 Gif처럼 bottom이 부족하더라도 달력의 위치를 조정해야 합니다.

시도해 본 일


bottom을 추가하여 위에 표시할 수 없게 합니다


브라우저를 세로로 줄이면bottom이 부족합니다. 달력이 위에 표시됩니다.
여기서 중요한 것은 달력으로 구성된bottom은 달력 입력 형식의 부요소의 높이에 의해 결정된다.
부요소의 높이를 height: 〇〇px만큼 높이면 된다는 것이다.
이렇게 하면 달력 이하의bottom이 넓어져서 원래는 위에 나타나지 않고 모두 아래에 나타난다.
다만 주의점으로서 물론 높이가 높아지면 스크롤 범위도 늘어나 다른 해결책을 고민했다.

부모 요소에 relative 적용


드디어 이거야.
부모 요소에relative를 설정하여datetimepicker의 이동 범위를 제한하는 방법입니다.
수정 전
test.html
<body>
  <div id="container">
    <input type='text' class="datetimechecker">
  </div>
</body>
수정 후
test.html
<body>
  <div id="container">
    <div id="carendar-position">　 <!--追加 -->
      <input type='text_field' class="form-control">
    </div>
  </div>
</body>
test.css
/* 追加 */
#carendear-positon {
  position: relative;
}
따라서 지정한 부모 요소를 기점으로 달력의 위치를 제한할 수 있다.
반대로, 눈썹의position을relative로 설정하면, 눈썹을 기점으로 달력을 표시합니다.
이번에는 inputform을 기점으로 달력을 표시하고 싶어서 바로 위에 부모 요소를 만들고 relative를 응용하여 inputform을 기점으로 표시 위치를 결정했습니다.

총결산


한동안 대원datetimepicker의 css를 만지작거렸지만 조금만 만지작거리면 붕괴될 때가 많아요. 너무 복잡해서 전혀 몰라요...
그래서 데이터 패키지를 졸렬하게 만지작거리는 것보다
① 달력을 표시할 곳에 부모 요소 추가
② 상위 요소에 relative 설정
이런 절차는 가장 간단한 방법이다.
Python 표준 라이브러리 -- abc 모듈
황소 기술 공유

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage