mui-downshift icon indicating copy to clipboard operation
mui-downshift copied to clipboard

how to get rowHeight ?

Open sibelius opened this issue 5 years ago • 1 comments

I'd like to adapt the menu height based on the number of rows and also based on the screen size

is this possible?

sibelius avatar Sep 04 '18 17:09 sibelius

Currently due to using react-virtualized the height has to be known (to enable windowing), either as an explicit pixel height passed to menuHeight, or derived pixel height from the number of menu items. If we drop react-virtualized (#54) you should be able to leverage CSS (use 100vh, etc), but until then it has to be one of the two.

One workaround you might try is using a measurement component to pass the explicit container height. I used to do this with mui-table when it also used react-virtualized. I would use vx's ParentSize and a wrapping component. Something like this (untested, but should lead you in the right direction).

<div style={{ height: 'calc(100vh - 64px)' }}>
  <ParentSize>
    {({ height }) => (
      <MuiDownshift menuHeight={height} ... />
    )}
  </ParentSize>
</div>

techniq avatar Sep 05 '18 13:09 techniq