I want to display a large block of text (a very lo...

# compose-desktop

[kevin]

I want to display a large block of text (a very long line essentially) word wrapped on the screen. If I put the text into a Text component then there is no scrolling, if I use a BasicTextField I get scrolling but there doesn’t appear to be any scroll bars. Is there a way to fix either of these issues? Thanks

[jim]

Wrap the text in a box with scrollable:

Box(
                Modifier.scrollable(
                    orientation = Orientation.Vertical,
                    state = scrollable
                )
            ) {
                  Text("...")
                }
            }

[kevin]

Hi Jim,

Thanks for your help

I tried this:


val scrollState = rememberScrollState(0)
Box(
modifier = Modifier.scrollable(orientation = Orientation.Vertical, state = scrollState)
) {

Text(
"... long text here ...",
color = Color.White,
fontFamily = FontFamily.Monospace,
fontSize = fontSize
)
}


But I still do not have scrolling enabled


I changed it to

val scrollState = rememberScrollState()
Box(
modifier = Modifier.verticalScroll(scrollState)
) {

Text(
fileData.toString(),
color = Color.White,
fontFamily = FontFamily.Monospace,
fontSize = fontSize
)
VerticalScrollbar(
rememberScrollbarAdapter(scrollState),
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight()
)
}

and I have scrolling but no scroll bar

Do I need to add a VerticalScrollbar to the composition (and if so, how?)

[jim]

At first glance, I would have expected that to work

@Igor Demin do you see what's wrong here?

[Igor Demin]

VerticalScrollbar should be outside of `verticalScroll`:

Box(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = (1..10000).joinToString { "x" },
        modifier = Modifier.verticalScroll(scrollState)
    )
    VerticalScrollbar(
        rememberScrollbarAdapter(scrollState),
        modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight()
    )
}

[Igor Demin]

As for scrollbars for text fields - unfortunately we don't support this yet (the state of the text field scroll is private, and scrollbars can't access it). But we will definitely figure something out in the future.

[kevin]

Thanks @Igor Demin (and @jim) that now works