CODEWITHSUNDEEP
htmlcss
RANTO BERK
RANTO BERK

Reputation: 31

how to make a overflow popup inside div show above without overflow?

enter image description here

<div> // parent div with display flex and no wrap
    <div> // div 1 which has popup inside with overflow
    </div>
    <div> // div 2
    </div>
    <div> // div 3
    </div>
</div>

Is there any way to make the popup show above without overflowing, cant resize the div 1 or the popup, Tried with position: absolute or z-index, None worked

Added the sample jsfiddle link below. Please help

jsfiddle

Upvotes: 0

Views: 133

Answers (1)

mplungjan
mplungjan

Reputation: 177786

What exactly do you mean with "above" without overflowing?

If you want to toggle the div and show it above, this will work better than your current code where you have to click twice

const pop = document.querySelector(".popup")
const myFunction = () => pop.hidden = !pop.hidden;
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.inbox-filter {
  height: calc(100vh - 44px);
  overflow-y: auto;
  border-right: 1px solid #e2e7f2;
  background: #f9fbfe;
  padding: 14px 10px;
  flex: 0 0 380px;
}

.inbox-grid {
  flex: 0 0 380px;
  min-width: 330px;
  position: relative;
  background: #fff;
  border-right: 1px solid #e8edf7;
}

.inbox-msg-body {
  width: 100%;
  min-width: 550px;
  background-color: #fff;
}

.popup {
  width: 600px;
  height: 600px;
  border: 1px solid black;
  position: absolute;
  z-index: 999;
}
<div class="flex-container" style="min-height: auto">
  <div class="inbox-filter">
    <h4>Date Range</h4>
    <button type="button" onclick="myFunction()">
       Date Range
    </button>
    <div class="popup" hidden>
      Hello
    </div>
  </div>
  <div class="inbox-grid">

  </div>
  <div class="inbox-msg-body">

  </div>
</div>

If you want to show the popup inside

const pop = document.querySelector(".popup");
pop.closest("div.inbox-filter").style.overflow = "hidden";
const myFunction = () => pop.hidden = !pop.hidden;
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.inbox-filter {
  height: calc(100vh - 44px);
  overflow-y: auto;
  border-right: 1px solid #e2e7f2;
  background: #f9fbfe;
  padding: 14px 10px;
  flex: 0 0 380px;
}

.inbox-grid {
  flex: 0 0 380px;
  min-width: 330px;
  position: relative;
  background: #fff;
  border-right: 1px solid #e8edf7;
}

.inbox-msg-body {
  width: 100%;
  min-width: 550px;
  background-color: #fff;
}

.popup {
  width: 600px;
  height: 600px;
  border: 1px solid black;
}
<div class="flex-container" style="min-height: auto">
  <div class="inbox-filter">
    <h4>Date Range</h4>
    <button type="button" onclick="myFunction()">
       Date Range
    </button>
    <div class="popup" hidden>
      Hello
    </div>
  </div>
  <div class="inbox-grid">

  </div>
  <div class="inbox-msg-body">

  </div>
</div>

Upvotes: 1

Related Questions