Html Question posted in
Some basic documentation can be found here.

Place HTML popover in a flexbox parent

I added a popover to a page and it is unaffected by any CSS applied to its ancestors.

How can I place the popover at the bottom of the viewport by using a flexbox parent element like this:

#popoverparent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: flex-end;
  z-index: 1;
}

#mypopover {
  display: block;
  z-index: 1;
}
<div id="popoverparent">
  <div id="mypopover" popover="manual">
    <p>Some text.</p>
    <p><button popovertarget="mypopover" popovertargetaction="toggle">Close</button></p>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The answer to my question is using identical z-index values for parent and popover. Ali's answer helped with the actual positioning.


  2. 0

    Maybe that can work for you.

    For example,

    index.html

        <div class="flex-container">
       <div id="mypopover" popover="manual">
       <p>Some text.</p>
       <p><button popovertarget="mypopover" popovertargetaction="toggle">Close</button></p>
    </div>

    style.css

    .flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex-grow: 1; /*It determines how a flex item will distribute the available free space among other flex items.*/
}

#mypopover {
  margin-top: auto;
}

    I hope it works

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search