Making child surface size a percentage/relative to the parent

[osiloke]

New to famous-angular, I was wondering how i would go about making child surface sizes relative to the parent. I looked at existing issues but none seems to resolve to how this should be done in an angular way, something that has to do with data binding. The only option i can mage is that i create the surfaces in the controller and then render using the fa-render-node directive. I just want to find out if there is a better way of doing this.

Thanks

Basically, i would like to do something like the following

fa-app.full-screen
    fa-view
        fa-modifier(fa-size='[undefined, undefined]', fa-origin='[.5, .5]', fa-align='[0.5, 0.5]') 
            fa-surface(id="back", fa-background-color="'black'")
        fa-modifier(fa-align='[0.5, 0.5]', fa-origin='[0.5, 0.5]', fa-size='[0.5 * back.width, 0.5 * back.height]') 
            fa-surface(fa-background-color="'red'", id="bottom")

[osiloke]

Apparently, i could just use fa-scale.

[zackbrown]

fa-scale will work, but it will also distort the contents of your surfaces if you have things like text or images. Another option is to use fa-proportions, which is new to Famo.us 0.3.0. Set proportions on a modifier and add a child surface with dimensions [undefined, undefined]. Yet another option is to use a fa-flexible-layout. On Oct 25, 2014 12:38 AM, "Osiloke Harold Emoekpere" < notifications@github.com> wrote:

Closed #243 https://github.com/Famous/famous-angular/issues/243.

— Reply to this email directly or view it on GitHub https://github.com/Famous/famous-angular/issues/243#event-183560692.

[osiloke]

Yes, i noticed that fa-scale distorted any child surfaces. I tried using fa-proportions but it seems to have no effect on the layout. im trying to get some kind of padding,I tried doing this

fa-modifier#auth-buttons(fa-origin='[0.5, 0.5]', fa-align='[0.5, 0.946]', fa-proportions='[.1, .1]', fa-translate='t.get()') 
            fa-grid-layout(fa-options='{dimensions:[2, 1]}') 
                fa-modifier(fa-origin='[.5, .5]', fa-size='[undefined, undefined]')
                    fa-surface(fa-background-color="'pink'", fa-color= '"white"', fa-font-size='"0.8em"', fa-click='login($event)') 
                        span login
                fa-modifier(fa-origin='[.5, .5]', fa-size='[undefined, undefined]')
                    fa-surface(fa-background-color="'red'")
                        span sign up