How do you make a button fill the horizontal space?

Using the following code I can make a button fill the horizontal space:
enyo.kind ({
    name : "App",
    components: [
        {kind: "FittableColumns", components: [
            {kind: "Button", content: "Button", fit: true }
        ]}
    ]
});
But using FittableRows doesn't make the button fill the vertical space:
enyo.kind ({
    name : "App",
    components: [
        {kind: "FittableRows", components: [
            {kind: "Button", content: "Button", fit: true }
        ]}
    ]
});
So, how do I make the button fill the vertical space?

Comments

  • Add a style:"height:100%;", to your FittableRows component.
  • You don't need FittableRows or FittableColumns to make a single element fill space. Those should be used when you have multiple elements and one of them should fill the remaining space.

    Instead, use standard CSS. Setting width or height to 100% will generally do the trick. Be aware that padding on the element will give you trouble if you don't also use box-sizing: border-box.

    Here's an example. Change the height to width to see the opposite. The enyo-border-box class fixes the box sizing issue.
  • It appears FittableColumns and FittableRows implementation is different. Perhaps it should behave the same - or kind: "Button" is not yet designed to work with FittableRows .
  • The reason it doesn't work in the above code is that the FittableRows instance doesn't have a defined height so it's only as tall as it's elements. FittableColumns gets a defined width of 100% by default (since it's a div which is display:block by default).

    If you added classes: "enyo-fit" (assuming App is rendered into document.body) or height: 100% as @psarin suggests to the FittableRows instance, it will work.
Sign In or Register to comment.