Uppy: Unable to reduce height of dashboard to less than 400px

Created on 2 Nov 2018  路  4Comments  路  Source: transloadit/uppy

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:

Minimum height of Uppy Dashboard

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?

Most helpful comment

Still unable to reduce the height on uppy/react Dashboard

All 4 comments

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.

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.

Still unable to reduce the height on uppy/react Dashboard

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hikurangi picture hikurangi  路  4Comments

rrjanbiah picture rrjanbiah  路  3Comments

ameft picture ameft  路  4Comments

aleccool213 picture aleccool213  路  3Comments

agreene-coursera picture agreene-coursera  路  4Comments