Text input label wrapping in v2.5.0-alpha.1

Hi!

We are testing out an upgrade to v2.5.0-alpha.1 and have found that the labels of some of our text input fields are now wrapping in an unfortunate manner. Is there a way to correct this?

Screen Shot 2021-01-08 at 4.09.51 PM.png

It’s possible this is related to this pull: Refactor "Clear input" button · eclipsesource/jsonforms@8a3a800 · GitHub, as it looks like perhaps the refactored clear button is not being taken into account when setting the width of the trimmed fields.

Thanks for everything!

[original thread by sarahtrefethen]

Thanks for the report! The problem with the input labels is that it’s hard to find a good default. Looking at Material UI issues, they usually point to spec which specifies that labels should be short.

Any “smart” behavior we built on top, like trimming the text usually “fixed” too long labels for one scenario, while making it way worse in others.

Which version of JSON Forms are you currently using and how does it look like currently to you? How do you expect the labels to behave? I’m pretty sure that we can just replicate the old behavior with some theme customization.

[Florian Gareis]

Hi @sarahtrefethen(sarahtrefethen),
The following custom code will restore the old behavior:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';


const theme = createMuiTheme({
  overrides: {
    MuiInputLabel: {
      root: {
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        width: '100%',
        whiteSpace: 'nowrap'
      }
    }
  }
});
<ThemeProvider theme={theme}>
  <JsonForms
      ...
  />
</ThemeProvider>

Please test this code and give us feedback if it works. Thanks!

[sarahtrefethen]

[sarahtrefethen]

Hi Florian, hi Stefan, thank you for your replies!
To answer Stefan’s questions, this is what the above schema looks like in JSONForms 2.3.2.
The trimmed input fields are shorter in the alpha reslease. Florian’s code is helpful for eliminating the text wrap, but it doesn’t quite get us back to old behavior, because our users have already chosen labels that fit in the wider fields.

I see, so the problem is that the overall size of the inputs changed, not really the labels themselves. I quickly tried to reproduce the issue by comparing our example apps between 2.3.2 and 2.5.0-alpha but I wasn’t successful (i.e. the forms rendered their inputs in the same width). The problem is that there are many factors influencing the rendered result, from Material Ui’s CSS which is changing from time to time as well your app’s CSS. For example our example app lets the form grow to a predefined size, which is why I guess the problem doesn’t occur for me.

I would like to suggest to just customize your CSS/theme to make sure the controls and labels behave like you want. This way you are not dependent on some arbitrary default state which could change with any update of Material UI or JSON Forms.

For example to make sure that the labels never wrap you could just define a min-width for your controls in your theme, e.g. { overrides: { MuiFormControl: { root: { minWidth: ‘20em’ …} (not tested)

Alternatively you could let the form grow to reasonable widths (and therefore also grow the controls) so that the labels don’t wrap. Here you don’t even need any theme customization, especially when also setting a min-width for your form. However if you want to allow to shrink your form so small that the labels don’t fit at some point and you don’t want to wrap you could use the ellipses approach of 2.4.1 outlined above.

Personally I would probably go with the CSS for the form to make sure it always has a reasonable size in your app.

[sarahtrefethen]

Thank you so much for your responses Stefan and Florian! Targeting the MuiFormControl root style in the theme provider as Stefan suggested above seems to have fixed this problem for us. Thanks again!