A modern programming language that makes developers happier.

kotlinlang

Hello, I'm here once again. I have a couple of views that goes off screen, how can I make the parent scrollable. I tried to use `ScrollPanel` with a `SimpleMutableListModel`

`ScrollPanel` is the right way to make scrollable regions. Did you include `nativeScrollPanelBehavior()` in you modules when launching the app, and install a `theme`? ScrollPanels need this behavior to perform scrolling.

```class ListDemo(
    display     : Display,
    themeManager: ThemeManager,
    theme       : DynamicTheme,
        …
): Application {
    init {
        themeManager.selected = theme
        val list = List(
            model,
            selectionModel = MultiSelectionModel(),
            itemVisualizer = …,
            fitContent     = setOf(Height)
        ).apply {
                …
            cellAlignment = fill
        }

        display += ScrollPanel(list).apply {
            size                    = Size(400, 200)
           }
        }
    }

    override fun shutdown() {}

    companion object {
        private val appModules = listOf(
                nativeScrollPanelBehavior(),
                …
               )
        operator fun invoke() = application(modules = appModules) {
            ListDemo(instance(), instance(), instance(), …)
        }
    }
}```

Are you in fact using a `List` in the `ScrollPanel`? You’ll also need a Behavior for it (see sample above). I’m not at my computer, so the code above might have some minor issues, but this is how you’d make a `List` scrollable.

Note that ScrollPanel can only have a single item in them. So you’d wrap your Views in a `Collection` or something else if you wanted to make them scroll. You can also make the ScrollPanel fill the display if it’s your topmost View.

You can also see how ScrollPanels are used by checking out the <https://github.com/nacular/doodle-tutorials/blob/master/Todo/src/commonMain/kotlin/io/nacular/doodle/examples/TodoApp.kt|Todo tutorial code>.

Can I add a single view(which has inner views) to the ScrollPanel? And make it scrollable?

I set a background color to Red on a view using the `view{}` but I'm still getting white background

You need to use that background color in the render function like

```render = {
    rect(bounds.atOrigin(), fill = backgroundColor!!.paint)
}```

Yes that was what I did. I think I'm starting to think doodle way :sweat_smile:

So the rootview needs a margin, I'll have to use layout right??

Yes to `Layout`. You can place one on the `Display` just like Containers.

A behavior can also be used to render a View like you said.

Hello <@U010Q6P7AQ5> is there a way to make ScrollPanel  horizontal??

Do you mean make it only scroll horizontally? If so, yes. ScrollPanel will scroll in either direction it needs to based on the size of its content. So you can make it horizontal (or vertical) only by setting its content size so it matches the panel’s height (or width for vertical).

This is done using one of two properties of ScrollPanel:

```contentWidthConstraints  = { it eq parent.width - panel.verticalScrollBarWidth }
```
```contentHeightConstraints = { it eq parent.height - panel.horizontalScrollBarHeight }```
You can <https://github.com/nacular/doodle/blob/ceecc9901937122b93cb218eee3438870da89b53/Core/src/commonMain/kotlin/io/nacular/doodle/controls/panels/ScrollPanel.kt#L130|see> that these properties default to sizing the panel’s content to its ideal width and height.

Yeah I checked the source, found out I didn't need to change anything it'll adapt to the view. Thanks!