How to make a scrollable custom component?

Webix JS
#1

Please see here for a basic custom component where I’m trying to make a “tall” HTML rendering scrollable:

https://snippet.webix.com/swkdyui6

How do you enable scrolling for a custom component like this?

The documentation for the webix.Scrollable mixin (here) does not make it clear how to use it. As mentioned in a comment at that doc page, a sample would be excellent.

#2

Hello,

Could you please clarify why do you want to use protoUI?
You can create scrollview and add a template in the body
Please check Code Snippet

#3

Thanks for responding, @Nastja.

The real objective, and the reason for using protoUI, is to wrap a third party widget into a webix widget. diff2html, to be specific. protoUI works great for this, except for the lack of functional scrolling.

The example snippet I gave was just a simple and reduced “tall html” case that is easier to hack on and discuss than a full diff2html implementation.

Your proposal to use template is interesting. Is a scrollable custom widget with protoUI difficult to make? I’ll experiment with template, but I’d much rather have a webix-friendly reusable component with settable properties that can be used just by specifying {view: "diff2html", ...}.

As a comparison, I also use your excellent Ace editor wrapper. The implementation for this uses protoUI, and it was that example that was followed. Ace does not require webix-managed vertical scrolling, though.

It is worth noting that, while hacking around trying to figure out a way to achieve a scrollable protoUI widget (since webix.Scrollable doesn’t seem to work), I came up with this hack with the use of some associated CSS:

https://snippet.webix.com/lslgawfn

I would much rather just use a mixin, though!! My hack is probably fragile, and certainly doesn’t enable us to use fancy webix scrolling if we decide to go that route.

Am I misunderstanding what webix.Scrollable is supposed to do?

#4

Hello,

The Scrollable module is not for direct usage. Within the library it is mixed into data widgets (list, chart) and related ones (template, form, scrollview).

So you can inherit from any of these widgets, template being the simplest one: Code Snippet

You CSS solution is also valid, but it can be achieved a bit simpler.

#5

Thanks, Helga! Your examples were very helpful. :slight_smile:

If webix.Scrollable (or other mixins) are internal implementations that are “not for direct usage”, it might be a good idea to remove them from the documentation. I spent a bunch of time trying to get them to work,. and otehrs will likely do the same if they are in the docs.