Jmix 2.4.3
I am dynamically creating an InputDialog and finding there is extra space above each parameter, so the dialog is much taller than necessary.
If I look at the controls in the dev tools, I see each vaadin-form-item has an extra section at the top:
Are there any options to reduce the space between parameters?
Hi!
Creating an InputDialog worked as expected. The form with formItems is the default layout for the dialog. If you create parameters with your own fields (demo link), then there should be no empty spaces by default. Generating the dialog should set the label from your component to the formItem. Could you show the code that creates this dialog please?
Dmitriy
Ahh, I think I see the difference. Mine are custom fields because I need more control
dialogs.createInputDialog(view)
.withHeader("Send Promotion Email")
.withLabelsPosition(Dialogs.InputDialogBuilder.LabelsPosition.TOP)
.withParameters(
InputParameter.parameter("addr").withField(() -> {
TextField field = uiComponents.create(TextField.class);
field.setLabel("Address");
field.setReadOnly(true);
field.setValue(fullMember.getUsableEmail());
field.setWidthFull();
return field;
}),
InputParameter.parameter("rank").withField(() -> {
TextField field = uiComponents.create(TextField.class);
field.setLabel("New rank");
field.setReadOnly(true);
field.setValue(fullMember.getRank().getDisplayName());
field.setWidthFull();
return field;
}),
InputParameter.parameter("comment").withField(() -> {
TextArea field = uiComponents.create(TextArea.class);
field.setLabel("Comment");
field.setWidthFull();
return field;
}),
InputParameter.booleanParameter("bccMe").withField(() -> {
Checkbox field = uiComponents.create(Checkbox.class);
field.setLabel("BCC Me");
field.setValue(false);
return field;
})
)
.withActions(DialogActions.OK_CANCEL)
.withCloseListener(closeEvent -> {
if (closeEvent.closedWith(DialogOutcome.OK)) {
String comment = closeEvent.getValue("comment");
fullMember.setOneTimeComment(comment);
Boolean bccMe = closeEvent.getValue("bccMe");
String bccEmail = Boolean.TRUE.equals(bccMe) ? ((User) currentAuthentication.getUser()).getEmail() : "";
memberService.sendMemberEmailAsync(fullMember, MemberEmailType.RANK_CONFIRM, "", bccEmail);
notifications.create("Email sent to: " + fullMember.getUsableEmail())
.withType(Notifications.Type.SUCCESS)
.show();
}
})
.open();
In this case you just need to define the label attribute not on the components directly, but on the input paramter.
Try something like this:
dialogs.createInputDialog(view)
.withHeader("Send Promotion Email")
.withLabelsPosition(Dialogs.InputDialogBuilder.LabelsPosition.TOP)
.withParameters(
InputParameter.parameter("addr")
.withLabel("Address")
.withField(() -> {
TextField field = uiComponents.create(TextField.class);
field.setReadOnly(true);
field.setValue(fullMember.getUsableEmail());
field.setWidthFull();
return field;
}),
InputParameter.parameter("rank")
.withLabel("New rank")
.withField(() -> {
TextField field = uiComponents.create(TextField.class);
field.setReadOnly(true);
field.setValue(fullMember.getRank().getDisplayName());
field.setWidthFull();
return field;
}),
InputParameter.parameter("comment")
.withLabel("Comment")
.withField(() -> {
TextArea field = uiComponents.create(TextArea.class);
field.setWidthFull();
return field;
}),
InputParameter.booleanParameter("bccMe")
.withLabel("BCC Me")
.withField(() -> {
Checkbox field = uiComponents.create(Checkbox.class);
field.setValue(false);
return field;
})
)
.withActions(DialogActions.OK_CANCEL)
.withCloseListener(closeEvent -> {
if (closeEvent.closedWith(DialogOutcome.OK)) {
String comment = closeEvent.getValue("comment");
fullMember.setOneTimeComment(comment);
Boolean bccMe = closeEvent.getValue("bccMe");
String bccEmail = Boolean.TRUE.equals(bccMe) ? ((User) currentAuthentication.getUser()).getEmail() : "";
memberService.sendMemberEmailAsync(fullMember, MemberEmailType.RANK_CONFIRM, "", bccEmail);
notifications.create("Email sent to: " + fullMember.getUsableEmail())
.withType(Notifications.Type.SUCCESS)
.show();
}
})
.open();
Best regards,
Dmitriy
Yes, that is much better. Thank you!
I had to keep the label on CheckBox fields otherwise it would appear above the checkbox. This means the extra space above the checkbox control remains, but at least the others are better.
This is the result of those changes:
