I think the default of the css box model is broken by design. I'd think the solution is simply to stick to using border-box. http://css-tricks.com/box-sizing/
On Apr 4, 2014, at 9:54 PM, Peter Ent wrote: > Hi, > > I've been working on a mobile app example for FlexJS as a way to try out the > Flex JS in a practical manner with the intent of running the app using > PhoneGap. In the course of doing this I've been running into things that need > adjustment. > > One of them is the box model. Right now FlexJS is sort of a hybrid between > ActionScript and JavaScript. I'll use the .width property as an example. > > In Flex, when you give a component a width of 50 pixels that component is 50 > pixels wide. Some components, such as a container, would embed a scrollbar if > its content were greater than 50 pixels. But you can be sure that your > component is 50 pixels wide and you can position other components knowing > that. > > If you add padding to the component, that will offset the interior by that > amount. If you make a Container 200 pixels wide and give it a padding of 10 > pixels, positioning a child of that container at (0,0) will render the child > 10 pixels in from the left and 10 pixels down from the top. The child thinks > it is at (0,0) and the Container will remain 200 pixels wide. > > In the CSS Box model, things work differently. If you make an HTML element 50 > pixels wide and give it a padding of 10 pixels, the overall width of the HTML > element will be 70 pixels: the 50 pixels are the width of the content area > and 2*10 pixels (left and right) are the padding added to that. > > HTML goes further and adds on border thickness and margin; Flex doesn't have > margins. > > I was having trouble getting things to align because I would make a ButtonBar > 480 pixels wide and it was turning out to be wider than that. When I looked > into the code, I saw that making a component 480 pixels was just the start: I > was getting that plus a padding on each of the buttons that make up the > button bar plus the width of the border around each button. > > This makes alignment very difficult because you must ask for more than just > width (or height). > > I suggest FlexJS completely adopt the CSS Box Model. This means setting a > component's width isn't going to take into account its padding, border > thickness, and margin - it is just going to set the component's content area > width. For example, if I make a Button's width be 50 pixels, the text will be > placed within that 50 pixel content area, but there may be padding, a border, > and a margin surrounding the Button. If I want all of my Buttons to align > horizontally with no gaps, I should make sure the Buttons do not have any > margin. > > What this means is that .width won't set the overall width of the component. > This may affect layout calculations which will have to examine the > component's margin, border thickness, and padding values. So I suggest making > it simple (height dimension would have similar properties of course): > > .width is the content area. > .padding is the padding around the content area, inside the border. > .borderThickness is the thickness of border that surrounds the padding and > content area. > .margin is space around the component. > .x will position a component's upper-left margin. > > .overallWidth will be .width + 2*.margin + 2*.padding + 2*.borderThickness > > You can use .overallWidth to position elements in layouts as it will account > for all of the extra space in a component's box. > > Further, for Flex JS 1.0, I suggest we keep it simple to padding, margin, and > borderThickness and leave edge specifics (e.g., padding-top, margin-bottom) > to another release or a developer can create their component or override > functions to account for that. > > Finally, it should be easier to build applications because you can let CSS > have a greater say in the size and positioning of components. For example, if > I want to make a row of buttons that are all touching, I just create a > Container with a horizontal layout and put the Buttons into it. Then in CSS, > I specify that the Buttons have zero margin and if I want them inset within > the Container, I give the Container, via CSS, some padding. > > Thanks for your time, > > Peter Ent > Adobe Systems >
