React-md: [DatePicker] - Nested dialog date picker size not working

[c0b41]

https://www.useloom.com/share/58a590e15b0942d1892e176e640b533b

also similar problem #436

Version

• React - *
• React-MD - 1.0.17
• Browser *

[mlaursen]

Darn. This one is kinda tough. To support iOS, I ended up switching the height calculations to be calc(100% - 16px) instead of calc(100vh - 16px) since it doesn't include the toolbars in its calculations. Another problem is that the overlay is "fixed" within the parent dialog...

Until I can think of a better solution, you can always go with:

.md-dialog--centered {
  .md-dialog {
    max-height: auto;
    max-width: auto;

    @media (max-device-width: 320px) {
      // iphone 5 is 320x500 with toolbars included.

      max-height: 500px - 16px;
      max-width: 320px - 16px;
    }

    // and any other devices less than 340x530
  }

  .md-overlay {
    bottom: -50vh;
    left: -50vw;
    right: -50vw;
    top: -50vh;
  }
}

Another problem you might run into is if you don't provide disableScrollLocking to your DatePickers since it'll move the parent dialog to top: 0 and hide overflow.

[mlaursen]

After the last release (1.2.3), it is now possible to have these nested as expected if you provide portal, lastChild renderNode and disableScrollLocking. However, this isn't super ideal yet.

  <DialogContainer
    id="simple-action-dialog"
    visible={visible}
    onHide={this.hide}
    actions={actions}
    title="Change something?"
  >
    <DatePicker
      id="some-date"
      label="Choose a date"
      placeholder="12/12/2013"
      portal
      lastChild
      renderNode={null}
      disableScrollLocking
    />
  </DialogContainer>

To explain _why_ this works and the additional props.

portal, renderNode, and lastChild

This will move the dialog out of the parent dialog so it doesn't need to be constrained with the max width and height limits. The renderNode={null} is required in addition with portal because there is built-in functionality to help portals before the 1.1.0 release that changed portals to be opt-in. The lastChild is used to render this as the last child in the body. This will allow the child dialog to display over the currently opened dialog. Another possibility would be to update the z-index of the child dialog to be above the default dialog z-index.

disableScrollLocking

This is applied because we don't actually want to add this functionality since the parent dialog should be handling it.

Demo: https://codepen.io/mlaursen03/pen/VMGQNB

[madc0der]

Not able to pass null for typescript version. Workaround:
renderNode={document.getElementById('root');} or some other root for react app.