Hi,
I’m currently in the process of upgrading a project from MX7 to MX8 and running into several issues, particularly with input widgets rendering. I think there are several things wrong with the current way Mendix renders input widget components since Mendix 8. Here are my suggestions:
- Form groups have a breakpoint to set flex-direction: column from 992px. However the col-sm class is applied, which is 768px. So between 768 and 992 px, the form group is wrapped to the next line but the cols are maintained which leads to unexpected behavior. They should both have the same breakpoint.
- Input widgets without label also get the .form-group class. I believe this is wrong and it leads to a lot of wrong behavior for input widgets. Input widgets without any additional components should not get the .form-group class assigned to them.
- For checkboxes on horizontal orientation, the class ‘col-sm-offset-3’ is applied (where 3 matches the dataview setting for label width). However, this class doesn’t exist so it doesn’t work. It should be ‘offset-sm-3’ as you can see in the Bootstrap documentation.
- Checkbox labels that span multiple lines break the layout. I fixed it by applying flex: 1 to the .control-label in checkboxes, but it should be fixed in core styling.
- Dropdowns have white-space: nowrap applied, which makes it so that labels are not wrapped to the next line. I believe this is wrong to do by default. You don’t want to hide this information by default which might be important. If the developers decide it needs to be hidden they can apply custom styling themselves. (.mx-dropdown label {white-space: nowrap} in _mxui.scss)
- For inline radio buttons, the class .inline is applied, but this class is already used in many projects to apply display: inline styling. Can you change it to something like .radio-inline to avoid confusion?