Cannot scroll MarkdownText inside a LazyColumn

[phucynwa]

I tried to use MarkdownText inside a LazyColumn but it isn't able to be scrolled.

                Box(modifier = Modifier.fillMaxSize()) {
                    LazyColumn(
                        state = rememberLazyListState(),
                        modifier = Modifier.fillMaxSize()
                    ) {
                        item {
                            MarkdownText(
                                markdown = demo,
                                viewId = R.id.markdownTextId,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .wrapContentHeight()
                            )
                        }
                    }
                }

I also tried using Column and verticalScroll modifier but it doesn't work.

                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .verticalScroll(rememberScrollState())
                    ) {
                        MarkdownText(
                            markdown = demo,
                            viewId = R.id.markdownTextId,
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                        )
                    }

Do you have any solution for this problem. Thank you.

Note: If I can find a good solution, I'll push my PR to this repository. 😄

[mamilov]

@phucynwa Have you found a solution? We are also struggling with this problem.

[mamilov]

I was able to fix it by wrapping the Component in a Box and adding a transparent Surface on top. It will disable Links, but we don't use them in our use case, so it might help you as well.

val density = LocalDensity.current
var height by remember { mutableStateOf(0) }
val heightDp = remember(height) { with(density) { height.toDp() } }

BoxWithConstraints(modifier = Modifier.onSizeChanged {
    height = it.height
}) {
    MarkdownText(
        markdown = markdown,
        style = style,
        fontResource = fontResource,
        color = color,
        textAlign = textAlign,
        modifier = modifier
    )
    Surface(
        color = Color.Transparent,
        modifier = Modifier
            .fillMaxSize()
            .height(heightDp)
    ) {}
}

[jeziellago]

Hello @phucynwa, Running the sample project, your code works fine 🤔. Can you share more details about the problem? Compose version, Android version...

I tried to use MarkdownText inside a LazyColumn but it isn't able to be scrolled.

                Box(modifier = Modifier.fillMaxSize()) {
                    LazyColumn(
                        state = rememberLazyListState(),
                        modifier = Modifier.fillMaxSize()
                    ) {
                        item {
                            MarkdownText(
                                markdown = demo,
                                viewId = R.id.markdownTextId,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .wrapContentHeight()
                            )
                        }
                    }
                }

I also tried using Column and verticalScroll modifier but it doesn't work.

                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .verticalScroll(rememberScrollState())
                    ) {
                        MarkdownText(
                            markdown = demo,
                            viewId = R.id.markdownTextId,
                            modifier = Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                        )
                    }

Do you have any solution for this problem. Thank you.

Note: If I can find a good solution, I'll push my PR to this repository. 😄