simonwep/nanopop

🍦 Minimalistic, small, positioning engine. Build for high-performance, minimal footprint and maximum control over positioning behavior.

We're having a really bad day.

The Unicorns have taken over. We're doing our best to get them under control and get GitHub back up and running.

Contact Support • GitHub Status • @githubstatus • Just kidding, check me out!

nanopop's Issues

Alignment when body height is not 100%

This isn't a bug as such, but it did catch me by surprise, so I thought I'd document it and you can decide if it is a bug or not.

The alignment offered by nanopop fails (return null) when the height of the window is large enough for the content to align correctly, but the body is not (i.e. it might have a small amount of content, or a position fixed element which is what I was using).

Here is a screenshot showing the body being short:

Edit: Bother, the firefox highlighting of the element didn't get included in the screenshot. The body tag height ends just after the little CloudTables logo.

Perhaps when the container is the body, it should use the window height / width rather than the body? I worked around it in my case with a min height of 100% for the body.

Usage with React

Hey there. Is it safe to use with react lifecycle hooks? As I noticed nanopop has no method to destroy an instance and react will try to create another one every re-render. Thanks

Support for arrow positioning

Would be nice to have an option to pass an arrow element that gets positioned properly.

suggestion: add position information to the positioned node

I need the reposition method to add information regarding the placement of the popper element because I want to use it as tooltips and I need to know where are the poppers places so I could render the correct triangle tip which will point to the side which triggered the tooltip

Node version issue

I changed nothing. But when ci/cd runs cmd gives me above error. What should I do? I can not upgrade node version. Because others libs contains version error.

Wrong arrow positioning in transformed container

When the reference, popper, and arrow elements are descendants of an element with transform style, the arrow positioning will break, while the popper position is correct. It happens only when the container with the transform style is smaller than the reference size + popper size.

To reproduce, use this test that applies a transform: scale(1); style to a parent with no visual changes:

<div id="container">
    <div id="transform">
        <div id="reference"></div>
        <div id="popper"></div>
        <div id="arrow"></div>
    </div>
</div>

<style>
    @import '_reset.css';

    #container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #transform {
        transform: scale(1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #reference {
        width: 40px;
        height: 40px;
    }

    #popper {
        width: 100px;
        height: 100px;
    }

    #arrow{
        position: fixed;
        width: 10px;
        height: 10px;
        background: black;
        transform: translate(-50%, -50%) rotate(45deg);
    }
</style>

<script type="module">
    import {reposition} from '/dist/nanopop.mjs';

    const reference = document.querySelector('#reference');
    const popper = document.querySelector('#popper');
    const arrow = document.querySelector('#arrow');

    reposition(reference, popper, {
        position: location.hash.slice(1),
        arrow: arrow
    });
</script>

the result would be:

path to typings in package.json is wrong

in package.json it pointing to /dist/index.d.ts in reality it is /dist/src/index.d.ts

suggestion: position relative to mouse pointer

Love this lib, and would like to see a feature for positioning by mouse and not by element

This is for tooltips which I want to show when hovering some elements, but I want the tooltip to follow the mouse as long as it is hovered on the element (which I will manage myself using mouseenter, mouseleave & mousemove events)

Suggested API:

NanoPop.reposition( 'pointer', tipElm )

forceApplyOnFailure missed in v2? How now to handle manually positions of element?

Hi, I see that forceApplyOnFailure missed in v2
How now to handle manually positions of element?
For example, I now that an element need to have position 'bottom-end'.
if the element does not fit into the calculated area to take the desired positioning, your plugin uses positionFlipOrder.
if the element does not fit in any of the existing positionFlipOrder variant - the element receive top: 0; left: 0;
Is it possible to somehow do so that the element in this case simply does not have anything? That is, to remove any inline styles? In this case, I would be able to set position with css only.

DEMO: https://codesandbox.io/s/practical-pond-zsump?file=/src/App.js

As a progressive improvement, I would consider not removing / resetting to 0 - all positioning styles, but only those that are not compromised. For example if position is 'bottom-end', and vertically element anyway is in normal rythm, but only have problems with horizontally position, that solution is only to remove left: XX from inline styles, but leave top: YY.
Because in this case, I could simply set a fallback using css: left: 0; right: 0; and element is fullwidth pisitioned.

Thanks!

error [email protected]: The engine "node" is incompatible with this module. Expected version "^20". Got "18.18.2" vercel

So i was trying to deploy my project but locally it builds well cause i'm guessing cause i have the current node version but on vercel, i get the above error i had to check to see you specified the node version to be ^20 which is still in beta mode.

How can i go around this ?

 "engines": {
        "node": "^20"
    },

Boundary padding

Is there any way I could add a padding to the container rect so that my popper elements don't stick to the very edge of the screen?

Position "bottom-middle" not behaving as expected

When using an inline-block button and a wide dropdown element, with Nanopop configured to have the dropdown appear in the "bottom-middle", I instead see the dropdown appearing on the right side of the button.

NanoPop(reference, popper, {
  position: "bottom-middle"
});

I created an example to showcase the code: https://codepen.io/panphora/pen/RwWXwWw

Can you help me figure out how to get the dropdown to appear below the button and in the middle?

Truncate when no viable match

It would be great if this could be extended such that in the case of failure to find any fit we could (optionally) discover the position-variant fit that has the smallest overflow and use that position but reduce the height / width of the popper so that it still fits on the screen.

Seems like in the case of a total miss, top & left of 0,0 is almost never what you want to happen.

fix position for reference node inside an iframe and popper outside

reposition(
    /* reference: */ document.querySelector('.btn'),
    /* popper: */ document.querySelector('.dropdown'),
    /* We're using the default options */
)

I have situation where an element inside an iframe injects a popup outside of the iframe and shows it, and I need to position this popup near the element which triggered it, but nanopop cannot position it:

https://jsbin.com/duwohoz/2/edit?html,js,output

the click event data is unhelpful because it is relative to the iframe document, but I think nanopop can try and check if the reference element is inside an iframe (of course same-origin one) and if so, get the iframe position

In my demo above I show how to find the correct iframe which hosts the reference node and through that, find the iframes position on the parent document and now nanopop should theoretically detect all that and offset the position of the popper accordingly

Thanks for this awesome lightweight script!

---

This is for my open-source knobs project which is encapsulated inside an iframe but I am adding a color picker that should open outside (there's no visual space for it inside the iframe)