Unable to reduce height of dashboard to less than 400px

[chrispickford]

I'm trying to reduce the height of the Uppy Dashboard plugin to be 200px to increase screen real estate. I've restricted the control to a single file upload so there is no need for all the extra space in the panel.

Using the height and maxHeight options the smallest I'm able to get the dashboard is 400px height:

My configuration is as follows:

const uppy = new Uppy({
  autoProceed: false,
    restrictions: {
      maxNumberOfFiles: 1,
      minNumberOfFiles: 1,
      allowedFileTypes: ["application/pdf"]
    }
  })
  .use(Dashboard, {
    target: "#uppy",
    inline: true,
    height: 200,
    maxHeight: 200
  });

How can I further reduce the height so it matches a single row of file icons?

[chrispickford]

I've noticed that the minimum height is hard set to 400px here:

https://github.com/transloadit/uppy/blob/master/packages/%40uppy/dashboard/src/style.scss#L118

.uppy-Dashboard-inner {
  position: relative;
  background-color: $color-almost-white;
  max-width: 100%; /* no !important */
  max-height: 100%; /* no !important */
  min-width: 290px;
  min-height: 400px;
  outline: none;
  border: 1px solid rgba($color-gray, 0.2);
  border-radius: 5px;

  .uppy-Dashboard--modal & {
    z-index: $zIndex-3;
  }

  @media #{$screen-medium} {
    width: 750px; /* no !important */
    height: 550px; /* no !important */
  }
}

After playing around it seems that reducing this to 320px sets the minimum height to a single row of file icons. I'll create a PR.

[arturi]

Set this to mobile only for now: 14135f5

[Alebron23]

I'm having a similar issue with the Uppy react component. It has a min-height property set to 450px in the uppy-Dashboard-inner class so you cannot set it below that.

I'm guessing this only needs to be toggled off when when the Dashboard react component receives a height property.

[DRAKO999]

Still unable to reduce the height on uppy/react Dashboard

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[5minpause]

What is the latest status on this? I have the react/dashbord and I cannot reduce its size…

The whole component does not behave "responsive" for me. Did I miss something in the docs about how to use it?

edit:
This comment (#1758 (comment)) helped me: set the width of the component to 100%.

<Dashboard uppy={uppy}  width='100%' />

The height is still an issue, but at least its not too wide right now.

[natschz]

Is there any update regarding this?
It seams like there is a height property for the Dashboard component, but a height of 100% or 500px results in a dashboard with a height even smaller than without the height property set.

Also I don't know why, but the Dashboard component seams to wrap all it's content into a div, which doesn't even have a class so it would also be kind of hard to target this with css selectors.

[vymao]

Encountering the same issue as @natschz

[banujan6]

Same here, Unable to reduce height less than 400px due to the min-height: 400px property. I tried to overwrite using CSS, Seems not working.

[Sajidtourtech]

.uppy-Dashboard .uppy-Dashboard-inner {
height: 100% !important;
min-height: 120px !important;
}
resolved by overwriting css.

[jonathanlal]

hmmm is there no way to make the dashboard responsive?

[jerryseigle]

add this to your global css file. This will unset any min-height and make it expand to the full height of any container you use the component. I notice the issue many are having happens depending on what other css rules you have or other libraries. Example there is a conflict with Uppy and Material UI however the solution below addressed my issues with many of the sites I build using Uppy. It would be nice if the Uppy Team would give us a prop to handle this

/* global.css */
.uppy-Dashboard-inner {
  height: 100% !important; /* Ensure it takes 100% of its parent container's height */
  min-height: unset !important; /* Remove the default min-height */
}