CODEWITHSUNDEEP
htmlcsspopover
Joey
Joey

Reputation: 1669

How to position a popover in css

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#products-list:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  margin: 0;
}

.parent {
  position: relative;
}
<nav>
  <ul class="container">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <div class="parent">
        <button class="trigger-btn" type="button" popovertarget="products-list">Products</button>
        <div id="products-list" popover>
          <ul>
            <li>Prod1</li>
            <li>Prod1</li>
            <li>Prod1</li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

I'm learning the new Popover api

I want to build a dropdown nav using the new popover api, so I wrote the above demo, current behavior is the popover is in the left of the page, I want to put it under the products button

enter image description here

I tried to override :popover-open css, but don't know why the position: absolute doesn't work, it should be in the parent box.

Upvotes: 2

Views: 4816

Answers (3)

NwN
NwN

Reputation: 1

As Brett Donald's answer shows, in the future it will be possible to use anchor-positioning. He also correctly stated that popovers are positioned in the center by default.

For those looking to use position: absolute (e.g. in browsers where anchor-positioning is not yet supported), it suffices to remove the default positioning using all: initial. Note that this will reset all inherited properties to their initial values, so it may remove other markup as well.

Example:

nav:popover-open {
    /* Undo the default popover-positioning,
       make sure to have this before position: absolute */
    all: initial;

    position: absolute;
        top: 8rem;
        right: 2rem;
}

Upvotes: -1

Brett Donald
Brett Donald

Reputation: 14340

Anchor positioning is coming, but the only major browser with support for it is Chrome, and as it is considered an experimental feature, you have to use a flag to switch it on.

Until anchor positioning is widely available, popovers created with the Popover API can only be positioned relative to the viewport (by default they are in the centre).

Upvotes: 6

Emre
Emre

Reputation: 359

You forgot to add right: 0;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#products-list:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  margin: 0;
  right:0;
}

.parent {
  position: relative;
}
<nav>
  <ul class="container">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <div class="parent">
        <button class="trigger-btn" type="button" popovertarget="products-list">Products</button>
        <div id="products-list" popover>
          <ul>
            <li>Prod1</li>
            <li>Prod1</li>
            <li>Prod1</li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions