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

Question

I'm using HeaderFooterLayout of famo.us. My requirement is, to place a view bottom aligned to the content view in the HeaderFooterLayout. But, the element, instead of snapping to the bottom of content area, it is overlapping with the footer. It works fine if I snap it to the top edge of the content area.

I could produce this problem in famo.us tutorial code too. Replace the code @http://www.famo.us/university/famous-102/layout/2/ with the following code. You can see that the surface just 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 the line numbers 33 and 34 to the following code.

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

Now, we can see the element snapping to center top of content view.

score 0 · Answer 1 · answered Jun 18 '14 at 16:25

Currently there are a few problems that come along with using true-sizing. Some issues have been fixed and others are still being addressed. In your case, the modifier returns a value of true for the height, and HeaderFooterLayout doesn't know how to handle it.

To fix the issue I used Surface's deploy event to get notified when the contentSurface is deployed. Then I set the size of the modifier in actual pixels.

Here is the call that you can insert right after contentSurface or contentModifier is defined..

contentSurface.on('deploy',function(){
    var height = contentSurface._currTarget.offsetHeight;
    contentModifier.setSize([200,height]);
});

Your content surface will now be sized and positioned correctly!

Hope this helps!

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

1 Answers1