Нужно показать внутренний DIV вне div PARENT с `overflow: auto`? - PullRequest
Новая
       0

Нужно показать внутренний DIV вне div PARENT с `overflow: auto`?

0 голосов
/ 07 декабря 2018

Поделиться здесь демо-интерфейс.В этом интерфейсе я хотел бы показать КАЛЕНДАРЬ за пределами родительского окна, просто используя CSS.Календарь должен быть переполнен кнопкой «Отправить / отменить» div n вне этой области тоже ![enter image description here] 1

Фрагмент кода:

Здесь должен прийти класс date-picker-wrpза пределами полной коробки MODAL. 

.modalwindow {
    z-index: auto;
    position: fixed;
    box-shadow: 0 0 20px #333;
    background-color: #fff;
    border-radius: 0;
    overflow: inherit;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}

.zc-form > div {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 550px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}
.zc-form-body {
    max-height: 500px;
    overflow: auto;
    padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input{
    border-radius: 4px;
    line-height: 33px;
    padding: 0 18px 0 15px;
    font-size: 14px;
    color: #2d3138;
    position: relative;
    height: 35px;
    border: solid 0.5px #dedede;
    background-color: #fff;
}

.date-picker-wrp{
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
    width: 100%;
    margin-top: 2px;
}

.datepicker{
    text-align: left;
    padding: 10px 7px;
}

.zc-form-footer{
    height: 85px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 30px;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
    z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
<div>

<div id="winhead" class="mheader ">Create Modal</div>

<section class="zc-form-body">
<div inputs="">
  <div class="font14 mrgT20 posrel">
    <div class="zc-form-input-hdr">
      <span>date</span>
       <span class="clr9 zc-form-hint">Enter the due date</span>
    </div>
    <div class="posrel cur">
      <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
      <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="msi-calndr zcclr font15"></span>
        <span class="msi-close zcclr"></span>
      </span>
      <div class="date-picker-wrp" style="display: block;">
        <div element="calendar" class="date-picker">
          <div class="datepicker" style="display: block;">
            <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>
<footer class="zc-form-footer">
  <div class="w100 h100 dflx fjustifySB">
    <div class="flexC">
      <button class="buttn_pos">Add Task</button>
      <button class="buttn_neg btn evbtn mrgR20">Cancel</button>         </div>
  </div>
</footer>
</div>
</div>

Ожидаемый результат: я хочу, чтобы dom календаря отображался как выпадающий список ниже, но ТОЛЬКО ПРИ ИСПОЛЬЗОВАНИИ PURE CSS (без вычисления JavaScript) enter image description here

Пожалуйста, обратитесь к этой ссылке JS Fiddle: https://jsfiddle.net/dilip96025/gzh26fej/28/ Здесь выпадающий список Страна должен выходить за рамки поля с con классом.

Ответы [ 2 ]

0 голосов
/ 08 декабря 2018

Насколько я могу воспроизвести вашу проблему с вашим текущим включенным кодом, вам нужно удалить overflow: hidden из .zc-form > div и удалить overflow: auto из .zc-form-body.Причиной вашей проблемы было то, что overflow: hidden действительно скрывает все , что выходит за пределы его собственной высоты и ширины. 

.modalwindow {
  z-index: auto;
  position: fixed;
  box-shadow: 0 0 20px #333;
  background-color: #fff;
  border-radius: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.zc-form > div {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 550px;
  position: relative;
  border-radius: 5px;
}
.zc-form-body {
  max-height: 500px;
  padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input {
  border-radius: 4px;
  line-height: 33px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  color: #2d3138;
  position: relative;
  height: 35px;
  border: solid 0.5px #dedede;
  background-color: #fff;
}

.date-picker-wrp {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
  width: 100%;
  margin-top: 2px;
}

.datepicker {
  text-align: left;
  padding: 10px 7px;
}

.zc-form-footer {
  height: 85px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
  z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
  <div>

    <div id="winhead" class="mheader ">Create Modal</div>

    <section class="zc-form-body">
      <div inputs="">
        <div class="font14 mrgT20 posrel">
          <div class="zc-form-input-hdr">
            <span>date</span>
            <span class="clr9 zc-form-hint">Enter the due date</span>
          </div>
          <div class="posrel cur">
            <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
            <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
          </div>
          <span class="msi-calndr zcclr font15"></span>
          <span class="msi-close zcclr"></span>
          </span>
          <div class="date-picker-wrp" style="display: block;">
            test1<br>
            test2<br>
            test3<br>
            test4<br>
            test5<br>
            test6<br>
            <div element="calendar" class="date-picker">
              <div class="datepicker" style="display: block;">
                <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>
  <footer class="zc-form-footer">
    <div class="w100 h100 dflx fjustifySB">
      <div class="flexC">
        <button class="buttn_pos">Add Task</button>
        <button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
    </div>
  </footer>
</div>
</div>

Редактировать: второй фрагмент кода в ответ на комментарий. 

.modalwindow {
  z-index: auto;
  position: fixed;
  box-shadow: 0 0 20px #333;
  background-color: #fff;
  border-radius: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.zc-form > div {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 550px;
  position: relative;
  border-radius: 5px;
}
.zc-form-body {
  max-height: 500px;
  overflow: auto;
  padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input {
  border-radius: 4px;
  line-height: 33px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  color: #2d3138;
  position: relative;
  height: 35px;
  border: solid 0.5px #dedede;
  background-color: #fff;
}

.date-picker-wrp {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
  width: 100%;
  margin-top: 2px;
}

.datepicker {
  text-align: left;
  padding: 10px 7px;
}

.zc-form-footer {
  height: 85px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
  z-index: 1;
}
<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
  <div>

    <div id="winhead" class="mheader ">Create Modal</div>

    <section class="zc-form-body">
      <div inputs="">
        <div class="font14 mrgT20 posrel">
          <div class="zc-form-input-hdr">
            <span>date</span>
            <span class="clr9 zc-form-hint">Enter the due date</span>
          </div>
          <div class="posrel cur">
            <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
            <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
          </div>
          <span class="msi-calndr zcclr font15"></span>
          <span class="msi-close zcclr"></span>
          </span>
          <div class="date-picker-wrp" style="display: block;">
            test1<br>
            test2<br>
            test3<br>
            test4<br>
            test5<br>
            test6<br>
            <div element="calendar" class="date-picker">
              <div class="datepicker" style="display: block;">
                <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>
  <footer class="zc-form-footer">
    <div class="w100 h100 dflx fjustifySB">
      <div class="flexC">
        <button class="buttn_pos">Add Task</button>
        <button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
    </div>
  </footer>
</div>
</div>
0 голосов
/ 07 декабря 2018

В css календаря добавьте "z-index: 1000" Например: 

<div class="calendar" style="z-index:1000"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...