Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Box row with property fields "shakes" when changing the value

Discussion in 'UIElements' started by Vapid-Linus, Aug 7, 2019.

  1. Vapid-Linus

    Vapid-Linus

    Joined:
    Aug 6, 2013
    Posts:
    58
    I'm playing around with the UIElements and am having a problem with some row layout stuff. I have two boxes next to each other in a row, but they "shake" for a frame or so sometimes when you change the value.

    Here's a demonstration:


    This is my UXML file:
    Code (JavaScript):
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <UXML xmlns="UnityEngine.UIElements" xmlns:e="UnityEditor.UIElements">
    3.   <Label text="Hello World! From UXML" />
    4.   <VisualElement class="box-row">
    5.     <Box class="box">
    6.       <Label text="Damage" class="header" />
    7.       <e:IntegerField label="Base Damage" binding-path="BaseDamage" />
    8.       <e:IntegerField label="Damage Per Level" binding-path="DamagePerLevel" />
    9.     </Box>
    10.     <Box class="box">
    11.       <Label text="Not Damage..." class="header" />
    12.       <e:IntegerField label="Base Damage" binding-path="BaseDamage" />
    13.       <e:IntegerField label="Damage Per Level" binding-path="DamagePerLevel" />
    14.     </Box>
    15.   </VisualElement>
    16. </UXML>
    This is my styles file:
    Code (JavaScript):
    1.  
    2. .box-row {
    3.     flex-direction: row;
    4. }
    5.  
    6. .box {
    7.     flex-grow: 1;
    8.     padding: 5px;
    9.     margin: 2px;
    10. }
    11.  
    12. .header {
    13.     -unity-font-style: bold;
    14. }
    If it matters, here's the custom editor file but it doesn't do anything special:
    https://gist.github.com/VapidLinus/f6b23956d6ec076f9ded39e254cc790e

    Anyone knows why it does this, or how to fix it?
     
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    61
    Hi,

    The "shake" you experience happens because the IntegerField gets a bit bigger when there are more number being displayed, so going from 9 to 10 makes the field bigger to make more space for the extra digit.

    You can prevent this with the following style instead.

    Code (JavaScript):
    1. .box {
    2.     flex: 1;
    3.     padding: 5px;
    4.     margin: 2px;
    5. }
    "flex: 1" will set "flex-basis: 0" instead of "auto" and the number of digits inside the IntegerField will not be considered by the flex algorithm.
     
    Vapid-Linus likes this.