Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug Report: ButtonGroup overflow popup menu moves on scroll and is not positioned correctly. #945

Open
bensontrent opened this issue Jan 30, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@bensontrent
Copy link

bensontrent commented Jan 30, 2024

When a ButtonGroup is in overflow mode, the popup menu should be absolutely-positioned to the right, relative of the button group.

image

You can see the problem in the animation: The popup menu is cut off by the end of the screen and when a user scrolls their window, the pop up menu follows the scroll, not the button group:

popup-menu

(The framerate of my animated gif is not sufficient to show the scrolling motion but the menu scrolls off-screen on scroll)

<ButtonGroup>
    <Button css={{ width: "fill" }} onPress={() => { saveShipmentAndNavigate(`/shipping-options/${id}`) }}>
         Edit options</Button>
    <Button type="primary" css={{ width: "fill" }} disabled={isBuying || context.environment.mode === "test"} 
         onPress={() => handleBuyOrTest("production")} > Buy label</Button>
    <Button type="secondary" css={{ alignX: "end", }} disabled={isBuying} 
        onPress={() => handleBuyOrTest("test")} > Print test label</Button>
</ButtonGroup>
@gabrielhurley-stripe
Copy link
Contributor

Yep, that doesn't look right! I've flagged this internally and we'll check it out. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants