A modern programming language that makes developers happier.

kotlinlang

screenshot_2022-12-19_at_9.13.00_am.png

What's wrong with my constraint?? Code in :thread:

```display += listOf(email, password, button)
display.layout = constrain(email, password,button){view1, view2, view3 -&gt;
    <http://view1.top|view1.top> eq   10
    view1.left eq  10
    
    <http://view2.top|view2.top> eq   view1.bottom + 10
    view2.left eq   10

    <http://view3.top|view3.top> eq  view2.bottom + 10
    view3.left eq 10
}```

But I only get to see just password TextField and button

This happens because `right` and `bottom` are actually composite constraints that look like this:

```view.right  == view.left + view.width
view.bottom == <http://view.top|view.top> + view.height```
This means your constraints are equivalent to writing:

```display.layout = constrain(email, password, button) { view1, view2, view3 -&gt;
    <http://view1.top|view1.top>  eq 10
    view1.left eq 10

    <http://view2.top|view2.top>  eq <http://view1.top|view1.top> + view1.height + 10
    view2.left eq 10

    <http://view3.top|view3.top>  eq <http://view2.top|view2.top> + view2.height + 10
    view3.left eq 10
}```
The constraint layout is therefor free to modify the `height` value for both `view1` and `view2` . It chose to make `view1.height`  == `0` in this case, which is a valid solution. You can control this by doing one of two things: adding constraints to hold the heights, or expanding `bottom` so you can make the `height` components `readOnly`

*Option 1*

```// preserve asks that a property remain unchanged
display.layout = constrain(email, password, button) { view1, view2, view3 -&gt;
    <http://view1.top|view1.top>  eq 10
    view1.left eq 10
    view1.height.preserve // equivalent to view1.height = view1.height.readonly

    <http://view2.top|view2.top>  eq view1.bottom + 10
    view2.left eq 10
    view2.height.preserve // equivalent to view1.height = view1.height.readonly

    <http://view3.top|view3.top>  eq view2.bottom + 10
    view3.left eq 10
}```
*Option 2*

```// expand bottom and ensure height is readOnly
display.layout = constrain(email, password, button) { view1, view2, view3 -&gt;
    <http://view1.top|view1.top>  eq 10
    view1.left eq 10

    <http://view2.top|view2.top>  eq <http://view1.top|view1.top> + view1.height.readOnly + 10
    view2.left eq 10

    <http://view3.top|view3.top>  eq <http://view2.top|view2.top> + view2.height.readOnly + 10
    view3.left eq 10
}```

<@U010Q6P7AQ5> is there a way I can listen to text entered into a `TextField` ?

<@U04BQTY9T2B>, you can enable <https://nacular.github.io/doodle/docs/accessibility|Accessibility> by including a module when you launch your app. Several components already integrate a11y features including `TextField`. In fact, the docs site has Accessibility enabled, so you can explore what is implemented for the components you see in the apps there.

There are still gaps, and this support only works for Web today. Please take a look and provide any feedback.