Need help with Scroller/FittableRows

edited March 2012 in Enyo 2
I'm having a tough time getting the layout I want and am a bit confused how to set it up. Hoping someone can help.

What I am trying to do is have a FittableRows layout with two toolbars and then a main view port that fits the remaining height.

The problem is when I use scroller on the main view port a scrollbar never appears. Scroller only seems to work in my App.js components but not in any nested Kind Controls.

Can layouts be nested? For instance can I put a FittableColumns inside a FittableRows?

Here is the setup that works:

App.js:
components: [
		{kind: "FittableRows", classes: "enyo-fit", components: [
			{kind: "Nav", name:"nav" },
			{kind: "Scroller", fit: true, name:"mainViewPort", components: [
				{kind: "HomeView"},
			]},
		]},
]
HomeView.js:
components: [
		{kind: "onyx.Toolbar", classes:"breadcrumb", components: [
			{kind: "onyx.RadioGroup", controlClasses:"onyx-tabbutton", components: [
				{kind:"onyx.Button", name:"myBtn", active:true },
			]},
		]},	
		{kind: "Repeater", name:"list", rows: 0, onSetupRow: "setupRow", ontap: "itemTap", components: [
			{name: "items", kind: "ToolDecorator", classes: "row-item"},
		]},
],

So I don't want my HomeView breadcrumb toolbar to scroll, but I cant seem to get that out of the scroll area. This would seem like it would work but doesn't. The scroll bar doesn't appear and the overflow is hidden from view.

App.js:
components: [
		{kind: "FittableRows", classes: "enyo-fit", components: [
			{kind: "Nav", name:"nav" },
			{name:"mainViewPort",  components: [
				{kind: "HomeView"},
			}
		]},
]
HomeView.js:
components: [
		{kind: "onyx.Toolbar", classes:"breadcrumb", components: [
			{kind: "onyx.RadioGroup", controlClasses:"onyx-tabbutton", components: [
				{kind:"onyx.Button", name:"myBtn",  active:true },
			]},
		]},
		{kind: "Scroller", fit: true, components: [	
			{kind: "Repeater", name:"list", rows: 0, onSetupRow: "setupRow", ontap: "itemTap", components: [
				{name: "items", kind: "ToolDecorator", classes: "row-item"},
			]},
		]},
],

Thoughts?

Comments

  • If your first example "mainViewPort" is "fit: true", so it fits the screen. Only immediate children of Fittable can be "fit: true". In the second example, the "fit: true" has moved into the internals of "HomeView", and does not apply to the FittableRows in App.

    In other words, something like this should work:

    AppView.js
    
    components: [
    	{kind: "FittableRows", classes: "enyo-fit", components: [
    		{kind: "Nav", name:"nav"},
    		{kind: "HomeView", fit: true}
    	]}
    ]
    ...
    
    HomeView.js:
    
    components: [
    	{kind: "FittableRows", classes: "enyo-fit", components: [
    		{kind: "onyx.Toolbar", classes:"breadcrumb", components: [
    			{kind: "onyx.RadioGroup", controlClasses:"onyx-tabbutton", components: [
    				{kind:"onyx.Button", name:"myBtn",  active:true }
    			]}
    		]},
    		{kind: "Scroller", fit: true, components: [	
    			{kind: "Repeater", name:"list", rows: 0, onSetupRow: "setupRow", ontap: "itemTap", components: [
    				{name: "items", kind: "ToolDecorator", classes: "row-item"}
    			]}
    		]}
    	]}
    ],
    ...
    
    If you pull the latest code from GitHub, we've modified Fittable so that you can use it as a superkind, which can make the setup a bit easier, like so:

    AppView.js
    
    kind: "FittableRows",
    components: [
    	{kind: "Nav", name:"nav"},
    	{kind: "HomeView", fit: true}
    ],
    ...
    
    HomeView.js:
    
    kind: "FittableRows",
    components: [
    	{kind: "onyx.Toolbar", classes:"breadcrumb", components: [
    		{kind: "onyx.RadioGroup", controlClasses:"onyx-tabbutton", components: [
    			{kind:"onyx.Button", name:"myBtn",  active:true }
    		]}
    	]},
    	{kind: "Scroller", fit: true, components: [	
    		{kind: "Repeater", name:"list", rows: 0, onSetupRow: "setupRow", ontap: "itemTap", components: [
    			{name: "items", kind: "ToolDecorator", classes: "row-item"}
    		]}
    	]}
    ],
    ...
    
    P.S., watch out for dangling commas. Some browsers (IE in particular) will see an error there.
    
    components: [
    	{}, // dangling comma error
    ]
    ...
    
    Scott
  • edited March 2012
    Boom: Only immediate children of Fittable can be "fit: true".

    That was it. Awesome got it working, and now using Fittable as the superKind to boot.

    I did find a bug though. Fittable does not react to a destroy() of a sibling component in the container.

    So doing:
    this.$.breadcrumb.destroy();

    On a control as:
    kind: "FittableRows",
    components: [
    	{kind: "onyx.Toolbar", name:"breadcrumb", components: [
    		{kind: "onyx.RadioGroup", controlClasses:"onyx-tabbutton", components: [
    			{kind:"onyx.Button", name:"myBtn",  active:true }
    		]}
    	]},
    	{kind: "Scroller", fit: true, components: [	
    		{kind: "Repeater", name:"list", rows: 0, onSetupRow: "setupRow", ontap: "itemTap", components: [
    			{name: "items", kind: "ToolDecorator", classes: "row-item"}
    		]}
    	]}
    ],
    Will leave a gap on the bottom.

    Thanks Scott!

    p.s. yes dangling commas. grr. I hate prefixing lines with commas and I hate the double edits to remove a single row having to clean up the trailing comma from the previous line.
  • I have a repeater.but though this has more number of data scroll bar is not coming.I kept it in the middle part of the page with upper toolbar and down toolbar.
  • how to get that
    .please help
  • Not sure I understand your question but it sounds like you want a top toolbar, a scroller with a repeater, and a bottom toolbar. That'd look something like:
    {kind:"FittableRows", components:[
      {kind:"onyx.Toolbar"},
      {kind:"Scroller", fit:true, components:[
        {kind:"Repeater"}
      ]},
      {kind:"onyx.Toolbar"}
    ]}
    Alternatively, you can use a List control rather than a Scroller+Repeater.
  • @brett after you destroy that sibling, probably a .reflow() or .resized() on the Fittable will fix the gap.
  • edited June 2014
    I basically have the setup @theryanjduffy‌ describes, but my scroller is too big. It always takes the height of the complete window, which leads it to not scroll enough, the bottom part is always hidden, it never scrolls down enough.
    If I adjust the height manually and subtract the height of the toolbars, it looks good.

    The issue of course is that I don't know the height of the window in advance. Any hints in how to fix that issue?

    //Edit: I managed to create a fiddle for it, see here: http://jsfiddle.net/Garfonso/r9td6/5/
  • Can you set a height for your GrabberToolbar footer and not apply absolute positioning so that its sizing can be accounted for in the fittable?
  • Yes, that helps. Sorry, I'm still learning CSS... there was some reason for the absolute position, though *scratches head*. At least it works now. :)
  • No problem, let us know if you run into any other issues. :)
Sign In or Register to comment.