06-05-2018 14:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-05-2018 14:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
My tumbler is supposed to have 100+ items. Is it possible to add these items dynamically/in a for-loop?
I have looked at Virtual Tile List, but Tumbler and Tile list have different behaviour. Does Tumbler have Delegates as well?
Answered! Go to the Best Answer.

Accepted Solutions
06-06-2018 01:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-06-2018 01:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Split it up in two tumblers. One for decimeters and one for centimeters (in case your using the metric system )

06-05-2018 17:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


06-05-2018 17:42
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Unfortunately there isn't a "virtual tumbler" like we have on tile list.
100 items in a tumbler seems a lot, what are you trying to make users select? Could you break that down into a few steps.

06-06-2018 00:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-06-2018 00:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Im building an body tracker app, where you can add different measurements. So the idea was to use Tumbler to pick an value, for instance between 50-100 cm.

06-06-2018 01:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-06-2018 01:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Split it up in two tumblers. One for decimeters and one for centimeters (in case your using the metric system )

06-06-2018 01:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-06-2018 01:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Creative solution, but Im not sure how user friendly that would be. Is it so that Tumbler is not ment to contain more then few number for items?

06-06-2018 01:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


06-06-2018 01:26
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Non-trivial values should probably be entered using settings on the companion device. I think you can restrict a text input to only accept numbers.
Gondwana Software

06-06-2018 02:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-06-2018 02:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I dont consider non-trivial values here. I need to have a list of values between 50-100. I can also solve this with use of + and - button and one text-label or ask user to enter number, but I want to make the input as easy as possible.

03-12-2019 01:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-12-2019 01:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I figure this thread is a good place for my question.
An approach I have tried is:
- Create, say, X svg elements (tumbler items)
- In JavaScript, set their display to "none" (e.g. via a forEach loop)
- For the ones you want to show, set their display to "inline"
This is similar to what others have suggested for similar questions elsewhere on the forums.
This approach almost works - the elements I want to show are visible but they are all bunched together on one line. See image. As soon as I touch the screen, however, they snap into the correct position and the tumbler looks and works as expected.
Below is the main code I'm using to try and do this. It's a fairly contrived example, ripped from the docs but it shows what I'm trying to do.
Am I expecting too much from the tumbler at this point in time? Or is there a way to get it to display the items stacked up nicely on first load of the screen? (in this case I would expect the see the first five items).
<svg viewport-fill="fb-cyan"> <use id="tumbler" href="#tumblerview"> <use id="item0" href="#tumbler-item" class="item"> <text id="content">01</text> </use> <use id="item1" href="#tumbler-item" class="item"> <text id="content">02</text> </use> <use id="item2" href="#tumbler-item" class="item"> <text id="content">03</text> </use> <use id="item3" href="#tumbler-item" class="item"> <text id="content">04</text> </use> <use id="item4" href="#tumbler-item" class="item"> <text id="content">05</text> </use> <use id="item5" href="#tumbler-item" class="item"> <text id="content">06</text> </use> <use id="item6" href="#tumbler-item" class="item"> <text id="content">07</text> </use> <use id="item7" href="#tumbler-item" class="item"> <text id="content">08</text> </use> <use id="item8" href="#tumbler-item" class="item"> <text id="content">09</text> </use> <use id="item9" href="#tumbler-item" class="item"> <text id="content">10</text> </use> </use> </svg>
import document from "document"; let tumbler = document.getElementById("tumbler"); let items = tumbler.getElementsByClassName("item"); items.forEach((item, index) => { if (index < 5) { item.style.display = "inline"; } });

03-12-2019 01:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-12-2019 01:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
My JavaScript code block is missing the line to set the elements to display "none". Here it is again.
import document from "document"; let tumbler = document.getElementById("tumbler"); let items = tumbler.getElementsByClassName("item"); items.forEach((item, index) => { item.style.display = "none"; if (index < 5) { item.style.display = "inline"; } });

