The last element of ListItem cannot be displayed when bindSheet is nested in a List component

Read the original article：The last element of ListItem cannot be displayed when bindSheet is nested in a List component

Context

The last element of ListItem cannot be displayed when bindSheet is nested in a List component.

In HarmonyOS development, developers sometimes encounter a scenario where a list displayed inside a sheet (using bindSheet) fails to render the last item completely. For example, a developer builds a SheetTestPage with a list of 15 items, but only 14 items appear visible.

Description

In the example below, there are 15 data items generated in the data array and rendered via List → ListItem. However, the last ListItem is not visible on screen.

Key details from the scenario:

• The list has a fixed height of 100%.
• The sheet (bindSheet) is configured in EMBEDDED mode and overlays the existing UI.
• There are additional layouts (like outer Columns) above and below the list that also consume height.
• Scrolling does not bring the last item into view because the content size overflows the visible sheet.

Sample Code Snippet (Excerpt):

List() {
  ForEach(
    this.data,
    (item: string, index: number) => {
      ListItem() {
        Text(item)
      }
      .height('70vp')
      .width('100%')
      .borderWidth(1)
      .borderColor(Color.Black)
    }
  );
}
.height('100%')
.width('100%')
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)

Solution / Approach

The reason the last list item is cut off is because the sheet’s height is limited by the overall layout, and setting the list to height('100%') tries to consume the entire available space — leaving no room for the last element when combined with other layout margins, paddings, or fixed heights.

Recommended fix:

• Change the list height to a percentage lower than 100%, for example, 80%.
• Ensure that surrounding layouts (like Column) do not consume fixed heights unnecessarily.
• Remove or reduce vertical margins and avoid fixed heights where possible in the sheet’s root layout.

Updated Code Snippet

Change:

.height('100%')

To:

.height('80%')

Resulting in:

List() {
  ForEach(
    this.data,
    (item: string, index: number) => {
      ListItem() {
        Text(item)
      }
      .height('70vp')
      .width('100%')
      .borderWidth(1)
      .borderColor(Color.Black)
    }
  );
}
.height('80%')
.width('100%')
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)

Key Takeaways

• Avoid assigning height: 100% to a list when using bindSheet unless the sheet’s layout explicitly supports full expansion.
• Prefer relative heights (e.g. 80%) to avoid overflow and clipping of items inside sheets.
• Review outer layout elements (Columns, Rows) for fixed heights or large margins that might reduce available space.
• Testing with different device sizes helps catch these layout overflows early.

Written by Fatih Turan Gundogdu