Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
devmotv
Reel Rookie

Cards with dynamic width based on text width

Jump to solution

We are trying to implement a scrollable row of cards. Each card should contain one line of text (usually one word) and have a variable width based on the text width. We were trying to achieve this using `MarkupGrid` and its `columnWidths` property, but `MarkupGrid` seems to need to have `numColumns` specified, and that value usually changes when items scroll. Is there a way to achieve this layout in Roku?

0 Kudos
1 Solution

Accepted Solutions
speechles
Roku Guru

Re: Cards with dynamic width based on text width

Jump to solution

If you want a scrollable row of cards why not use RowList? RowList comes from the same ArrayGrid. RowList allows variable widths. The ItemComponent you create for the RowList would be allowed variable widths. What exactly are you trying to do?

Can you share a drawing/mockup that shows what you hope to have the screen looking like?

View solution in original post

5 REPLIES 5
speechles
Roku Guru

Re: Cards with dynamic width based on text width

Jump to solution

If you want a scrollable row of cards why not use RowList? RowList comes from the same ArrayGrid. RowList allows variable widths. The ItemComponent you create for the RowList would be allowed variable widths. What exactly are you trying to do?

Can you share a drawing/mockup that shows what you hope to have the screen looking like?

devmotv
Reel Rookie

Re: Cards with dynamic width based on text width

Jump to solution

We've managed to deal with it using RowList and a fake Label measuring individual cards' widths. Perhaps there is a better solution without the fake Label, but we didn't find it. Thanks for the suggestion.

0 Kudos
cocotower
Roku Guru

Re: Cards with dynamic width based on text width

Jump to solution

Just for the record, the sample channel for FireTV and Google TV, uses the term "cards", while Roku calls them "posters".

 

0 Kudos
speechles
Roku Guru

Re: Cards with dynamic width based on text width

Jump to solution

https://developer.roku.com/docs/references/scenegraph/list-and-grid-nodes/rowlist.md

There is no concept of poster here. It can be anything. When you look at ItemSize in the above document it mentions poster size. But it is obviously an inherited document from the PosterGrid. It seems most of the ArrayGrid items are repurposed PosterGrid documentation customized a bit. Roku is lazy with the docs. This we know. No need to beat the dead horse.

The RowList is built by your itemComponent which can contain anything. Even MarkupGrid can be anything. The only thing built upon posters and called such is the PosterGrid and it has the word poster in the name. It is very obvious.

I prefer to call them "Cards" if you can build them into anything. I only use the word "Poster" when Roku forces them. Ie.. I never used the PosterGrid because it is basically the repurposed SDKA view from the old first days of Roku. Why Roku repurposed all the docs from the PosterGrid is because that doc must have been written first. Then they got lazy with the rest.

That is all. Just thought I would mention that. There is no concept of poster in any view except PosterGrid. Had to repeat it in case people skip ahead.

Have a nice day. 😉

0 Kudos
cocotower
Roku Guru

Re: Cards with dynamic width based on text width

Jump to solution

Roku uses the term Posters quite often starting all the way from the Channel Store and for various components, even if those components could display other items, although I can't think of anything you'd want to display in a scrolling grid other than clickable images with possible overlays.

What gets me is how Roku didn't put RenderPass in ZoomRowList, citing to me that ZoomRowList is not based on RowList.  You might want to try ZoomRowList which allows different item sizes for each row (not sure about each actual item) pre-zoom and zoomed.  I mixed mine up with DVD case aspect ratio posters while some rows have 16:9 posters.

 

0 Kudos