How to make scrollable list?


#1

I’m newbie with PlayCanvas. Now I need to create a scrollable list like this:

Are there any samples about this feature using Playcanvas? If not, hope anyone can give me some instructions to make it the right way?


#2

I have done it with raphael.js in my project


#3

There’s no built in logic for this in PlayCanvas UI system yet. I had to build my own for https://playcanvas.com/project/475452/overview/isometric-base-builder where the user chose what building to add to the world.

Relevant code here: https://playcanvas.com/editor/code/475452?tabs=7675637


#4

Thank you Yaustar, it’s exactly what I want :smiley:


#5

What about the scrollbar component in the editor @yaustar ? how would you use that? Here is what i have for it:


Editor here:
https://playcanvas.com/editor/scene/732724
Im trying to implement a scrollbar for the Table topic:

if anyone knows how to use the scrollbar component let me know i cant seem to get it to work right
@devMidgard have you any ideas on how this works?


#6

It’s still not 100% ready.

It’s accessible but there’s a few missing features such as being able to use the scroll wheel.

https://playcanvas.com/project/609262/overview/scroll-view

I also recommend reading up on the UI tutorials and user manual to help construct your dialog.

Easiest way to get a scroll view into the scene is to add one from the context menu under a 2D screen:

image


#7

Thats what i did is add it as an element but it seems not to be able to place you cant see it when you launch.
EDIT: But that project you posted might help i will let you know


#8

Here is where i need the scroller but i just cant seem to get it right

Also @yaustar maybe i should say its all UI scripted… here is the editor
https://playcanvas.com/editor/scene/732724
So i am not sure if it is possible to UI script a scrollbar but if it is let me know


#9

At the moment you are asking how to use the PlayCanvas UI scroll view but the project you have shown is using HTML for the UI. The two don’t mix.

You can use either one or the other or even both but you can’t put a HTML element in the PlayCanvas UI system or visa versa.


#10

So basically your saying i cant use the scroll bar? i would have to redo this?


#11

I’m saying that you are mixing two different systems that don’t mix. Go with HTML only or PlayCanvas UI only but don’t mix the two together.


#12

ok so if i mix the two together then it wont work but if i use just UI or just HTML it would? But dont i have to use UI to be able to show the html or are you saying make the UI a entity in the canvas (Screens)?


#13

I’ve just done it in the project linked above with PlayCanvas UI system.

It’s always been possible in HTML.

If you are using the PlayCanvas UI system, you have to use the PlayCanvas UI components.

If you are using HTML, you are literally adding HTML elements to the page as you can see here:


#14

oh ok i see what your saying ok i will go over this with my team and we will work through it if I get it too work i will be blessed :joy:


#15

@yaustar i need some help with something really quick, i am trying to set a placeholder for my search bar and the placeholder wont place here is the code im using:

    let searchDiv = document.createElement('input');
    searchDiv.setAttribute("type", "text");
    searchDiv.className="search";
    searchDiv.placeHolder="Search...";
    searchDiv.addEventListener("touchstart", ()=>{
       searchDiv.focus();
    });
if you can figure out why this is happening please let me know

#16

It may not be working because it’s not placeHolder but placeholder

Please read the DOM Element properties properly https://www.w3schools.com/jsref/prop_text_placeholder.asp