famo.us - HeaderFooterLayout - Bottom center aligned element inside content goes behind/above footer -

famo.us - HeaderFooterLayout - Bottom center aligned element inside content goes behind/above footer -

i'm using headerfooterlayout of famo.us. requirement is, place view bottom aligned content view in headerfooterlayout. but, element, instead of snapping bottom of content area, overlapping footer. works fine if snap top border of content area.

i produce problem in famo.us tutorial code too. replace code @http://www.famo.us/university/famous-102/layout/2/ next code. can see surface sits behind footer.

var engine = require('famous/core/engine'); var surface = require('famous/core/surface'); var headerfooterlayout = require("famous/views/headerfooterlayout"); var view = require('famous/core/view'); var statemodifier = require('famous/modifiers/statemodifier'); var maincontext = engine.createcontext(); var layout = new headerfooterlayout({ headersize: 100, footersize: 50 }); layout.header.add(new surface({ content: "header", classes: ["red-bg"], properties: { lineheight: "100px", textalign: "center" } })); var contentview = new view(); var contentsurface = new surface({ content: "content", classes: ["grey-bg"], properties: { textalign: "center" } }); var contentmodifier = new statemodifier({ size: [200, true], origin: [0.5, 1], align: [0.5, 1] }); contentview.add(contentmodifier).add(contentsurface); var contentviewmodifier = new statemodifier({ size: [undefined, undefined], }); layout.content.add(contentviewmodifier).add(contentview); /*layout.content.add(new surface({ content: "content", classes: ["grey-bg"], properties: { lineheight: '400px', textalign: "center" } }));*/ layout.footer.add(new surface({ content: "footer", classes: ["red-bg"], properties: { lineheight: "50px", textalign: "center" } })); maincontext.add(layout);

change line numbers 33 , 34 next code.

origin: [0.5, 0], align: [0.5, 0]

now, can see element snapping center top of content view.

currently there few problems come along using true-sizing. issues have been fixed , others still beingness addressed. in case, modifier returns value of true height, , headerfooterlayout doesn't know how handle it.

to prepare issue used surface's deploy event notified when contentsurface deployed. set size of modifier in actual pixels.

here phone call can insert right after contentsurface or contentmodifier defined..

contentsurface.on('deploy',function(){ var height = contentsurface._currtarget.offsetheight; contentmodifier.setsize([200,height]); });

your content surface sized , positioned correctly!

hope helps!

famo.us