palantir/blueprint

[MultistepDialog] Right panel does not vertically fill the dialog

Open

#4,870 创建于 2021年8月20日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
P3Package: coreType: bughelp wanted

描述

Environment

  • Package version(s): @blueprintjs/core 3.48.0 @blueprintjs/core 4.3.0

Code Sandbox

https://codesandbox.io/s/blueprint-sandbox-multistepdialog-0q5cju

Steps to reproduce

  1. Create a <MultistepDialog>
  2. Add multiple very short steps
  3. ❌ See that the footer row of buttons does not align with the bottom of the dialog

Actual behavior

The right-hand panel of the dialog does not extend to the bottom of the dialog if the height of the step navigation is larger than the height of the step content.

This is more obvious in the dark theme than the light theme, depending on your monitor's color reproduction.

Light

image

Dark

image

Expected behavior

Both panels of the dialog extend to the bottom of the dialog.

Light (and min-height for the example)

image

Dark (and min-height for the example)

image

Possible solution

I was able to fix this for my own project by rendering <div className={Classes.DIALOG_BODY}> as the first child of the <DialogStep>'s panel prop, and adding the following additional SCSS:

.bp3-multistep-dialog-panels {
  flex: 0 1;

  .bp3-multistep-dialog-right-panel {
    display: flex;
    flex-direction: column;
  }
}

I see that a <div className={Classes.DIALOG_BODY}> is also used in the docs example, is there any reason why this must be added manually and isn't rendered by the <MultistepDialog> or <DialogStep>?

贡献者指南

[MultistepDialog] Right panel does not vertically fill the dialog · palantir/blueprint#4870 | Good First Issue