Scroller can not display "scroller" when it should display in desktop browser

benluo

enyo.kind({
    name: "Books",
    classes: "onyx",
    components: [
        {kind: "onyx.Toolbar", components: [
            {content: "All books"},
        ]},
	{kind: "Scroller",  components: [
            {kind: "Repeater", rows: 0, ontap:"bookTap", onSetupRow: "setupBookList", 
             components: [{name:"book",content: "item"}]}
	]}
    ],

    books : [ ],

    setupBookList: function (inSender, inEvent){
        var idx = inEvent.index;
        inEvent.row.$.book.content = this.books[idx].name_cn;
        enyo.log(this.books);
    },
    
    bookTap: function (inSender, inEvent){
        var idx = inEvent.originator.owner.rowIndex;
        new Book(this.books[idx]).renderInto(document.body);
    },

    rendered: function() {
        this.inherited(arguments);
        var url = '/book';
        new enyo.Ajax({url: url,cacheBust: false}).response(this, this.setBooks).go();
     },

    setBooks: function (inSender, books){
        this.books = books;
        this.$.repeater.rows = books.length;
        this.$.repeater.build();
        this.$.repeater.render();
     }, 
    
});

I did a small app above. But the scroller never display and can not scroll the list.

Is there any idea?

benluo

onecrayon

Have you tried scrolling using your mousewheel? By default, enyo.Scroller will only use touch-based scrolling if you are in a touch environment.

You should also be able to force the issue by setting the touch property to true:

{kind: "enyo.Scroller", touch: true, components: [
    //...
]}

onecrayon

Just remembered the touch property might be only available in the bleeding edge code. If you are using one of the official beta releases, you might need to set strategyKind instead:

{kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy", components: [
    // ...
]}

sjmiles

As shown, your scroller will have 0 height.

Remember that most things are sized based on what's inside them, but certain things (like Scrollers) are designed to have a fixed height regardless of what's inside them.

You should be able to detect this problem very easily using a DOM inspector (all the main browsers have one).

You can test it by adding style="height: 300px;" to your Scroller definition, but ultimately I suspect you want to use Fittable (https://github.com/enyojs/layout).

benluo

Thanks. It points the root. Fittable works perfect. It seems most of "official" examples uses Fittable.

benluo

enyo.kind({
    name: "Books",
    classes: "onyx",
    components: [
         {kind: "FittableRows", name:"mainFit",classes:"enyo-fit", components: [
             {kind: "onyx.Toolbar",  components: [
                {kind: "FittableColumns", components: [
                    {name:"header", content: "All Books"},
                    {kind: "onyx.InputDecorator", components: [
                        {kind: "onyx.Input", placeholder: "Enter a search term..."}
                    ]},
                    {kind: "onyx.IconButton", src: "go.png"},
                    {name:"placeholder", fit:true, content:" "},
                    {kind: "onyx.Button",content:"All Function"}
                ]}
             ]},
	     {kind: "Scroller", fit: true, components: [
                 {kind: "Repeater", rows: 0, ontap:"bookTap", onSetupRow: "setupBookList", 
                  components: [{name:"book",content: "item"}]}
	     ]}
         ]}
    ],
          
    books : [ ],

    setupBookList: function (inSender, inEvent){
        var idx = inEvent.index;
        inEvent.row.$.book.content = this.books[idx].name_cn;
        enyo.log(this.books);
    },
    
    bookTap: function (inSender, inEvent){
        var idx = inEvent.originator.owner.rowIndex;
        new Book(this.books[idx]).renderInto(document.body);
    },

    rendered: function() {
        this.inherited(arguments);
        var url = '/book';
        new enyo.Ajax({url: url,cacheBust: false}).response(this, this.setBooks).go();
     },

    setBooks: function (inSender, books){
        this.books = books;
        this.$.repeater.rows = books.length;
        this.$.repeater.build();
        this.$.repeater.render();
     }, 
    
});

I update the code as above and found the FittableColumns does not works properly in onyx.Toolbar. "placeholder" does not expend its width.

Any idea how to deal with it?

sjmiles

By virtue of being placed in a Toolbar the FittableColumns is display: inline-block and therefore does not itself have a full width.

Instead of

             {kind: "onyx.Toolbar",  components: [
                {kind: "FittableColumns", components: [

try this

{kind: "onyx.Toolbar", layoutKind: "FittableColumnsLayout", components: [

Note that since FittableColumns doesn't support top/bottom margins, there may be some weirdness in the toolbar layout. I'm really not sure what to expect there.

benluo

I found a "perfect" solution. In onyx API documents

Note: it's possible to style a set of controls to look like they are in a toolbar without the container itself looking like a toolbar. To do so, apply the onyx-toolbar-inline css class to the container around the controls.

I modified as below, it works perfect now.

enyo.kind({
    name: "Books",
    classes: "onyx",
    components: [
         {kind: "FittableRows", classes:"enyo-fit", components: [
    //         {kind: "onyx.Toolbar",  components: [
                {kind: "FittableColumns",classes: "onyx-toolbar", components: [
                    {name:"header", content: "All Books"},
                    {kind: "onyx.InputDecorator", components: [
                        {kind: "onyx.Input", placeholder: "Enter a search term..."}
                    ]},
                    {kind: "onyx.IconButton", src: "go.png"},
                    {name:"placeholder", fit:true, content:" "},
                    {kind: "onyx.Button",content:"All Function"}
      //          ]}
             ]},
	     {kind: "Scroller", fit: true, components: [
                 {kind: "Repeater", rows: 0, ontap:"bookTap", onSetupRow: "setupBookList", 
                  components: [{name:"book",content: "item"}]}
	     ]}
         ]}
    ],
          
    books : [ ],

    setupBookList: function (inSender, inEvent){
        var idx = inEvent.index;
        inEvent.row.$.book.content = this.books[idx].name_cn;
        enyo.log(this.books);
    },
    
    bookTap: function (inSender, inEvent){
        var idx = inEvent.originator.owner.rowIndex;
        new Book(this.books[idx]).renderInto(document.body);
    },

    rendered: function() {
        this.inherited(arguments);
        var url = '/book';
        new enyo.Ajax({url: url,cacheBust: false}).response(this, this.setBooks).go();
     },

    setBooks: function (inSender, books){
        this.books = books;
        this.$.repeater.rows = books.length;
        this.$.repeater.build();
        this.$.repeater.render();
     }, 
    
});