How can I prevent my text from being clipped in a custom Data Viewer List layout?

Questions about Thunkable
1

Problem:
Even though every container and label is set to Fill container (width) and Fit to contents (height), my Description Label text still gets clipped on the List Screen.

Context:
I’m using the Quote Estimator app as my template. On my List Screen I have:

  • A top-level container
    • Direction: Horizontal
    • Horizontal Alignment: Center
    • Vertical Alignment: Center
    • Contains a Data Viewer List

I then created a Custom Data Viewer Layout called customLayout-phase, configured as follows:

  1. customLayout-phase
  • Direction: Vertical
  • Vertical Alignment: Top
  • Horizontal Alignment: Center
  • Contains → customContainer
  1. customContainer
  • Direction: Horizontal
  • Vertical Alignment: Center
  • Horizontal Alignment: Center
  • Width: Fill container
  • Height: Fit to contents
  • Contains → customLayoutContainer
  1. customLayoutContainer
  • Direction: Vertical
  • Vertical Alignment: Center
  • Horizontal Alignment: Center
  • Width: Fill container
  • Height: Fit to contents
  • Contains →
    • Name Label
    • Description Label

Capture
Capture1509×788 61 KB

Capture2
Capture21238×676 50.9 KB

2

Hello!

You can try the following

Set the Description Label’s “Max Lines” to 0 (unlimited) and ensure “Wrap Text” is enabled. Also, check the Data Viewer List height allows expansion and the parent containers have no fixed height or clipping styles. Use Vertical Scroll if needed.

3

The text-clipping issue is now fully resolved—thanks again for the pointer on making customLayout-phase scrollable and auto-sizing. The only remaining tweak is the vertical spacing between rows, which still feels a bit tight; I’ll adjust the padding/margins on my containers next. Solving the clipping has let me keep moving forward on the redesign. Appreciate the response @ianradnor088s4jwwg

4

You’re very welcome—glad to hear the clipping issue is fully resolved! :raising_hands:

For the vertical spacing, adjusting the padding/margin on customLayout-phase or its child containers (especially around customContainer or customLayoutContainer) should give you that breathing room between rows. Let me know if you want help fine-tuning those values. Keep going strong on the redesign!