question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FileUploader breaks Modal's UI when clicked

See original GitHub issue

What package(s) are you using?

  • carbon-components
  • [x ] carbon-components-react

Detailed description

Describe in detail the issue you’re having.

I want to have a fileuploader inside a modal window. The problem is that when I click on fileuploader the modal’s UI breaks by shifting to the top and disabling scrolling.

Is this issue related to a specific component?

Yes, Modal and FileUploader

What did you expect to happen? What happened instead? What would you like to see changed?

I expected for the modal to keep the same layout, but when FileUploader is pressed it moves up the whole modal content suddenly.

What browser are you working in?

Chrome

Additional information

Screenshots:

before clicking on fileuploader: Screen Shot 2020-11-25 at 4 08 43 AM

after clicking on fileuploader (right after dismissing the window that lets me pick the files to upload): Screen Shot 2020-11-25 at 4 08 30 AM

What can it be? Any suggestion? Anyone ever had this problem?

Thanks for your time!!!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
bitfedecommented, Feb 8, 2021

Thanks for letting me know! Good Job guys! 💪💪💪💪💪💪💪

0reactions
tw15egancommented, Feb 4, 2021

Hey there @bitfede! Looks like this was resolved in the latest release 7.28.0/10.28.0 (via https://github.com/carbon-design-system/carbon/pull/7698)

Updated example: https://codesandbox.io/s/modest-buck-81lj0?file=/index.js

Read more comments on GitHub >

github_iconTop Results From Across the Web

File upload pause, show modal window, continue uploading
I would like to pause file uploading, show file requirements and then continue. Example: user clicks on "upload ...
Read more >
File field upload in modal/dialog - Drupal Answers
This all works from UI/theming perspective but it brakes file upload. When modal window opens and file is uploaded I got error "An ......
Read more >
Transactional modal - Carbon Design System
Modals interrupt a user's workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous...
Read more >
10 Most Common Bootstrap Mistakes That Developers Make
The whole design will break when you want to upgrade Bootstrap files. ... We have specified that the modal won't close when user...
Read more >
Async Upload - DevExtreme File Uploader: Angular ...
The Upload mode drop-down menu allows you to specify whether the file is uploaded on a button click or instantly after the file...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found