Need to show a inner DIV outside PARENT div with `overflow:auto`? - css

Question

Sharing here the demo UI. In this UI, I would want to show the CALENDAR outside the parent window just by using CSS. The Calendar should overflow over the Submit/cancel button div n outside that too]1
Code snippet:
Here, the class date-picker-wrp should come outside the complete MODAL box.
.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>
Expected result:
I want the calendar dom to appear like the dropdown in below shortcut, but ONLY BY USING PURE CSS ( no javascript calculation)
Please refer this JS Fiddle link: https://jsfiddle.net/dilip96025/gzh26fej/28/
Here, the Country dropdown should come outside the box with con class.

Answer 1

As far as I could reproduce your problem with your current included code, you need to remove overflow: hidden from .zc-form > div and remove overflow: auto from .zc-form-body. The cause of your problem was that overflow: hidden really hides everything that goes beyond its own height and width.
.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>
Edit: second code snippet in answer to comment.
.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>

Answer 2

In the calendar's css add "z-index:1000"
Eg:
<div class="calendar" style="z-index:1000"></div>