Skip to main content

In the Universal GUI there is a build-in animation in the form edit-mode: A label of an empty field has a bigger font and is positioned more in the center, when you click on the field the label becomes smaller and moves to the top (see example images below). 

The same thing happens for lookup-fields when starting the edit-mode. The GUI seems to start the lookup fields empty field and put in the values a little bit later which seem to trigger the animation.

 

Our users find the animation distracting and sometimes even confusing for distinguishing the label from a value. Thus we would like to turn off the animation so that empty field labels have the same position/size as non-empty fields.

(How) would this be possible? 

 

Unit field is empty (label is big and centered)
Unit field is selected (label is small and at the top)

 

@PeterKeeris I guess you’ll have to add your vote to this Idea:  https://community.thinkwisesoftware.com/ideas/header%2Din%2Dform%2Dshould%2Dnot%2Dbe%2Denlarged%2Dfor%2Dempty%2Dcolumns%2Din%2Dread%2Dmode%2D2202

Let’s hope it will be picked up soon!


If anyone else is looking for a quick-fix, I used the following CSS:
.MuiFormControl-root .MuiFormLabel-root {
  transform: translateY(1.5px) scale(.85) !important;
  margin-top: 4px !important;
  margin-right: 12px !important;
  margin-bottom: auto !important;
  margin-left: 12px !important; 
}