[BUG] - Githubissues

troelslenda commented 3 weeks ago

[ ] I have written a good issue

Describe the bug

When adding a kirby-dropdown to a kirby-card and the dropdown exceeds the cards borders, it's cropped due to overflow:hidden. Explanation of applied labels can be found here: https://github.com/kirbydesign/designsystem/labels

## Describe how to reproduce the bug Bug replicated here https://github.com/kirbydesign/designsystem/tree/bug/card-overflow Go to Dropdown and interact with the first dropdown.

Which Kirby version was used?

develop as of today

## What was the expected behavior? That you can see all items of the dropdown

Add any screenshots

Screenshot 2024-11-01 at 13 33 45

Please complete the following information:

OS: [e.g. Windows, MacOS, iOS]
Browser [e.g. Chrome, Safari]
Browser version [e.g. 22]

Are there any additional context?

I understand the reasoning for overflow hidden in cards, not wanting the content to bleed out of a small container, but that will only happen on the X axis.

Is it possible to lift the overflow restriction to overflow-x: hidden?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

[ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

[ ] Make sure you have read: "Before you get coding".
[ ] Signal to others you are working on the issue by assigning yourself.
[ ] Create a branch from the develop branch following our branch naming convention.
[ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
[ ] Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

[ ] Do a self-review.
[ ] Create a pull-request.

RasmusKjeldgaard commented 3 weeks ago

@troelslenda you should be able to set usePopover to true to avoid this. Let me know if it fixes your issue.