FittableRows in enyo.List, fit attribute do not works

edited December 2014 in Enyo 2
Hello,

I try to used a FittableRows in a List but attribut fit : true do not works.
I try with enyo 2.5.2 and 2.4.0, and i have the same problem.
I try with firefox and google chrome on ubuntu.

A part of my code :
{kind : "enyo.List", name :"appsList", fixedSize: true, onSetupItem: "setupAppItem",
touch: true, components : [

{kind: "onyx.Toolbar", name: "item", ontap:"selectAppItem", style: "cursor: pointer; height: 60px",
components: [

{kind : "FittableColumns", style: "height: 100%; width: 100%;",
components : [

{kind : "enyo.Checkbox", name :"appEnable", style : "height: 45px; width: 45px;"},

{kind : "Image", name :"appImage", sizing: "constrain", src: "img/Nologo.png",
style : "width: 60px; height: 60px; background-size: 50px 50px;"},

{kind : "Control", name :"appName", fit: true, style : "font-family: 'SofiaProLiCond';"+
"font-size: 20px; color: #FFF; text-align: left; padding: 5px 5px 5px 5px;" +
"height: 100%;"}
]}

]}
]}

Comments

  • I think you will have to specify a size for the container of the FittableColumns for this to work correctly. Setting height/width to 100% without the container of that having a size will not work.
  • yes it's true, but that not solved my problem.

    my code modified :
    {kind : "enyo.List", name :"appsList", onSetupItem: "setupAppItem",
    touch: true, components : [
    {kind: "onyx.Toolbar", name: "item", ontap:"selectAppItem",
    style: "height: 60px; width: 100%;",
    components: [
    {kind : "enyo.FittableColumns", style: "height: 100%; width: 100%;",
    components : [
    {kind : "enyo.Image", name :"appImage", sizing: "constrain", src: "img/Nologo.png",
    style : "width: 60px; height: 60px; background-size: 50px 50px;"},

    {kind : "Control", name :"appName", fit: true, style : "font-family: 'SofiaProLiCond';" +
    "font-size: 20px; color: #FFF; padding: 5px 5px 5px 5px; height: 100%;"},

    {kind : "enyo.Checkbox", name :"appEnable", onActivate : "enableApp",
    style : "height: 45px; width: 45px;"}
    ]}
    ]}
    ]}
  • What about if you explicitly set the width instead of 100% in the style for 'item'?
  • edited February 2015
    Sorry for very late response.

    If I fixed the width of 'item' component, I have the same problem.
  • I don't know about your app requirements, but have you tried the useFlex option of the 2.5 release?
  • I add useFlex: true on the Fittable container :
    {kind : "enyo.FittableColumns", style: "height: 100%; width: 100%;", useFlex: true, ....}

    But I have the same problem.
  • useFlex should work for platforms that support display: flex. I tried it out with your code above successfully on Chrome v41 on Mac.

    The non-flexbox version will not, however, work with enyo.List due to the flyweight design. Controls within an enyo.List can only get a reference to the node by using prepareRow/lockRow or performOnRow which is required for Fittables. These methods are not called during the render flow of the list items and must be explicitly called by the app using enyo.List.

    So, if flexbox is supported on your target platforms, that'd be the easiest solution. In the absence of that, you might want to investigate a layout using CSS floats and margins which work fine in enyo.List since they don't require node dimension calculations.
Sign In or Register to comment.