thenikso / angular-autolayout

Constraint based layout for your AngularJS apps
http://thenikso.github.io/angular-autolayout
220 stars 17 forks source link

Children elements don't expand their parent's bounds #1

Closed jerryhjones closed 10 years ago

jerryhjones commented 10 years ago

In an example like the following, the div demo1 has no height unless explicitly set. This makes sense, as demo1-A through C are positioned absolutely, and therefor remove from the layout flow. However, it would be nice if constrained children would expand the bounds of their parents as well.

<div id="demo1" class="demo-container" al-update-on-resize>
    <div id="demo2">
        <div id="demo1-A" class="demo-box">A</div>
        <div id="demo1-B" class="demo-box">B</div>
        <div id="demo1-C" class="demo-box">C</div>
        <al-constraint>|-[demo1-A]-|</al-constraint>
        <al-constraint>|-[demo1-B]-|</al-constraint>
        <al-constraint>|-[demo1-C]-|</al-constraint>
        <al-constraint>V:|-[demo1-A]-[demo1-B(==demo1-A)]-[demo1-C(==demo1-A)]-|</al-constraint>
    </div>
</div>
thenikso commented 10 years ago

This is not the case by design. If it was, constraints between siblings in a container could conflict with external constraints affecting that container and there would be no common constraint solver to catch the inconsistency.

For that reason, autolayout constraints only affects sibling elements relative to a parent container.

In the example you provided, the autolayout container becomes #demo2 and thus the al-update-on-resize directive has no effect (as it should be added to an autolayout container)

If you wish to make #demo2 fit to #demo1 bounds you'll want to add a second set of constraints. In this case something like:

<div id="demo1" class="demo-container" al-update-on-resize>
    <div id="demo2">
       ...
    </div>
    <al-constraint>|[demo2]|</al-constraint>
    <al-constraint>V:|[demo2]|</al-constraint>
</div>

And al-update-on-resize would now make sense as it's applied to an autolayout container and will automatically propagate the update on child containers.

Thank you for the question that hopefully clarify the design. Feel free to re-open this issue if it doesn't convince you!