Why the LazyColumn is not scrolling till the end o...

# compose

[Pardeep Sharma]

Why the LazyColumn is not scrolling till the end of the list? I've a HorizontalPager Screen that contains 3-4 vertical list of items called BenefitComponent. Now the BenefitComponent has ElevatedCard, a Vertical List of items as:

[Pardeep Sharma]

HorizontalPager(
    modifier = Modifier
        .padding(top = Dimens.SpacingNormal)
        .fillMaxHeight()
        .fillMaxWidth(),
    state = pagerState,
    pageSize = FillPageSize(PAGE_WIDTH),
    contentPadding = PaddingValues(horizontal = Dimens.SpacingXNormal),
    pageSpacing = Dimens.SpacingSmall,
) { page ->
    // Our page content

    items[page]?.let {
        Column(
            modifier = Modifier
                .fillMaxHeight()
        ) {
            BenefitComponent(
                it,
                onBuyNowClick,
                onComparePassesClick,
            )
        }
    }
}

[Pardeep Sharma]

@Composable
fun BenefitComponent(
    items: ProductHighlightsUIModel,
    onBuyNowClick: (String) -> Unit,
    onComparePassesClick: () -> Unit,
) {
    Box(
        modifier = Modifier
            .padding(bottom = SpacingExtraLarge)
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        Box {
            ElevatedCard(
                modifier = Modifier.padding(top = SpacingExtraLarge),
                colors = CardDefaults.cardColors(containerColor = Theme.colorScheme.background),
                shape = Theme.shapes.medium,
                elevation = CardDefaults.cardElevation(DefaultCardElevation),
            ) {
                Column(
                    modifier = Modifier
                        .padding(
                            top = SpacingExtraLarge,
                            start = SpacingMedium, end = SpacingMedium,
                        )
                        .fillMaxWidth()
                        .fillMaxHeight()
                ) {
                    Column(
                        Modifier.fillMaxWidth(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        Text(
                            modifier = Modifier
                                .wrapContentWidth(),
                            text = items.strippedTitle,
                            style = Theme.typography.displayMedium,
                            color = tertiaryLight,
                        )
                        VerticalSpacer(size = SpacingMini)
                        Text(
                            modifier = Modifier
                                .wrapContentWidth(),
                            text = items.prices.firstOrNull()?.pricePoint ?: "",
                            style = Theme.typography.headlineLarge,
                            color = Theme.colorScheme.onSurface,
                        )
                    }
                    VerticalSpacer(size = SpacingNormal)

                    val listState = rememberLazyListState()
                    Box(modifier = Modifier.weight(1f)) {  // Wrap LazyColumn inside Box
                        LazyColumn(
                            state = listState,
                            modifier = Modifier
                                .fillMaxWidth()
                                .fillMaxHeight()
                        ) {
                            items(items.productFeatureList) { item ->
                                AllBenefitItem(
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(vertical = SpacingSmall),
                                    item,
                                )
                            }
                        }
                    }

                    VerticalSpacer(size = SpacingSmall)

                    Box(
                        modifier = Modifier
                            .fillMaxWidth(),
                    ) {
                        Row(
                            modifier = Modifier
                                .align(Alignment.Center)
                                .wrapContentWidth()
                                .background(
                                    color = ColorRed,
                                    shape = RoundedCornerShape(size = IconLarge),
                                )
                                .clickable { }
                                .padding(vertical = SpacingMedium),
                            horizontalArrangement = Arrangement.End, // Center horizontally within this row
                        ) {
                            Text(
                                modifier = Modifier
                                    .wrapContentWidth()
                                    .padding(horizontal = Dimens.SpacingXXXL),
                                text = stringResource(com.android.core.ui.R.string.Purchases_Screen_BuyNow),
                                style = Theme.typography.bodyLarge,
                                color = Theme.colorScheme.onPrimary,
                            )
                        }
                    }

                    VerticalSpacer(size = Dimens.ScreenPadding)
                }
            }
            Box(
                modifier = Modifier
                    .padding(horizontal = Dimens.SpacingXXXL)
                    .aspectRatio(ratio = 16 / 9f)
                    .clip(Theme.shapes.medium)
                    .background(Color.White),
            ) {
                RemoteImage(
                    imageUrl = items.mobileImage,
                    modifier = Modifier.fillMaxSize(),
                    scale = ContentScale.Crop,
                )
            }
        }
    }
}

@Composable
fun AllBenefitItem(modifier: Modifier = Modifier, item: ProductFeatureListUIModel) {
    Column {
        HorizontalDivider(
            modifier = Modifier
                .fillMaxWidth(),
            thickness = 0.5.dp,
            color = Theme.colorScheme.outline,
        )
        Row(
            modifier = modifier,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Box(
                modifier = Modifier
                    .wrapContentHeight()
                    .width(IconMini),
            ) {
                Image(
                    modifier = Modifier
                        .size(
                            if (item.included.equals(UiConstants.BENEFIT_YES, true)) {
                                IconMini
                            } else {
                                IconMicro
                            },
                        )
                        .align(Alignment.Center),
                    painter = if (item.included.equals(UiConstants.BENEFIT_YES, true)) {
                        painterResource(com.android.core.ui.R.drawable.ic_benefit_yes)
                    } else {
                        painterResource(com.android.core.ui.R.drawable.ic_benefit_no)
                    },
                    contentDescription = "Benefit",
                )
            }
            HorizontalSpacer(SpacingMedium)
            Text(
                text = item.featureText,
                style = Theme.typography.labelLarge,
                color = Theme.colorScheme.onSurface,
            )
        }
    }
}

[Pardeep Sharma]

I tried reading docs, chatgpt, stackoverflow but no luck 😞

[Zach Klippenstein (he/him) [MOD]]

got a screen recording?