Pixate + AutoLayout, changing the size using CSS breaks the style

Question

I am developing a iOS App creating the GUI programmatically using iOS 6 AutoLayout and CSS styling using Pixate. Everything seems to be working fine as long as I don't modify the size of the elements using Pixate CSS.

This is a sample view with height of the elements set by code:

iOS AutoLayout automatically sets the size of the container view correctly (white with grey borders). But when I set the height of the three form elements using CSS, the style is not applied correctly:

I've tried re-applying the styles and re-laying out subviews in viewWillAppear with no luck.

I've seen a tweet from Pixate team that indicates that it should work.

Has anyone faced the same issue or has any idea?

Answer 1

There are some known issues with auto-layout and Pixate. As a workaround, you can set an explicit height or width (probably height in this case) and that will oftentimes resolve this issue.

Answer 2

Could you post your CSS?

I had the same problem an solved it by removing the font-* attributes from CSS for my buttons. I then added a height: 44px and everything is well formatted, except you definitely need the font stuff.

Here is my style:

#default-button {
color: #fff;
background-color: linear-gradient(#00679B,#394170);
height: 44px;
border-radius  : 5px;
border-width   : 1px;
border-color   : #444;
box-shadow     : inset 0 1px 0 rgba(101,177,232,0.9),
0 1px 2px rgba(0,0,0,0.5);

}