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.

Sign up for GitHub

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

Jump to bottom

[ui5-upload-collection]: drag and drop overlay is overflowing #9975

Closed
1 task done
tkeiner opened this issue Oct 2, 2024 · 3 comments · Fixed by #9990 · May be fixed by #10050
Closed
1 task done

[ui5-upload-collection]: drag and drop overlay is overflowing #9975

tkeiner opened this issue Oct 2, 2024 · 3 comments · Fixed by #9990 · May be fixed by #10050
Assignees
@LidiyaGeorgieva
Labels
bug This issue is a bug in the code TOPIC RD

Comments

@tkeiner
Copy link

tkeiner commented Oct 2, 2024

Bug Description

If the collection height is small because only one attachment was uploaded, and then a file is dropped into the upload collection, the drag and drop overlay will overflow the component.

image

Affected Component

ui5-upload-collection

Expected Behaviour

Icon and text should not overflow.

Isolated Example

No response

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.2.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@tkeiner tkeiner added the bug This issue is a bug in the code label Oct 2, 2024
@LidiyaGeorgieva
Copy link
Contributor

Hello @tkeiner ,

Please provide isolated reproducible example.
If I test on https://sap.github.io/ui5-webcomponents/nightly/components/fiori/UploadCollection/#drag-and-drop I could not reproduce the issue - the height is enough and there is no overflow.

Best Regards,
Lidiya

@tkeiner
Copy link
Author

tkeiner commented Oct 4, 2024

Hello @LidiyaGeorgieva,
sorry I could not attach a stackBlitz example, had some issue with it.

In order to replicate the bug, there needs to be only a single item in the collection. Like this:

    <ui5-upload-collection>
        <ui5-upload-collection-item file-name="LaptopHT-1000.jpg" upload-state="Complete">
            uploadState="Complete"
            <img src="https://sap.github.io/ui5-webcomponents/nightly/images/HT-1000.jpg" slot="thumbnail">
        </ui5-upload-collection-item>
    </ui5-upload-collection>

I think in the example you provided the bug is not occuring because of the long description that breaks into a second line and by that increasing the height of the item. In https://sap.github.io/ui5-webcomponents/nightly/components/fiori/UploadCollection/#upload-states you can see that icon and text overflow if there is only one attachment.

Kind regards, Tobias

@LidiyaGeorgieva
Copy link
Contributor

Hello Hello @SAP/ui5-webcomponents-topic-rd please have a look.

@s-todorova s-todorova assigned s-todorova and unassigned s-todorova Oct 7, 2024
@LidiyaGeorgieva LidiyaGeorgieva self-assigned this Oct 7, 2024
LidiyaGeorgieva added a commit that referenced this issue Oct 8, 2024
@LidiyaGeorgieva
fix(ui5-upload-collеction): hide the upload icon when the height is t…
c7a615b 
…oo small

According to the design:
The icon should be displayed only when the height of the Drag
enabled container is more than 10rem.

fixes: #9975
@LidiyaGeorgieva LidiyaGeorgieva mentioned this issue Oct 8, 2024
Merged
LidiyaGeorgieva added a commit that referenced this issue Oct 18, 2024
@LidiyaGeorgieva
fix(ui5-upload-collеction): hide the upload icon when the height is t…
4f4c051 
…oo small

According to the design:
The icon should be displayed only when the height of the Drag
enabled container is more than 10rem.

fixes: #9975
downport of #9990
@LidiyaGeorgieva LidiyaGeorgieva mentioned this issue Oct 18, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@LidiyaGeorgieva LidiyaGeorgieva

Labels
bug This issue is a bug in the code TOPIC RD
Projects
Maintenance - Topic RD
Status: Completed
Milestone
No milestone
3 participants
@LidiyaGeorgieva @s-todorova @tkeiner