# Text Container Pro A styled text display component with background, border, and three size modes. Show long-form text in a fixed scrollable box, let it expand to fit all content, or truncate with a "Show More / Show Less" toggle. Supports selectable text for copy/paste. Perfect for descriptions, terms and conditions, notes, reviews, and any long content pulled from your database. ## Getting Started Add the Scrollable Text component to your screen. By default, it shows in Fixed mode -- the text scrolls within the component's height. Set the **Text** prop to your content or bind it to a database field via Magic Text. Switch the **Size Mode** to change how the component handles overflow. ## Settings ### Text The text content to display (default: "Enter your text here..."). Supports Magic Text -- bind to any text field in your database to display dynamic content. ### Size Mode How the component handles text that exceeds the visible area (default: Fixed). * **Fixed (Scrolls)** -- the component stays at the height you set in the editor. When text overflows, users can scroll within the box. A scroll indicator appears automatically. * **Expand with Text** -- the component grows taller to fit all the text. No scrolling, the box just expands. Use this when you want all content visible without user interaction. * **Show More / Less** -- the text is truncated to a set number of lines with a tappable "Show More" link below. Tap to expand and see everything, then "Show Less" to collapse. ### Max Lines The number of lines to show before truncating, 1--20 (default: 3). Only visible when Size Mode is Show More / Less. Set this to match how much of a preview you want users to see before they tap to expand. ### Show More Label The text for the expand link (default: "Show More"). Only visible when Size Mode is Show More / Less. Customize to match your app's language or tone -- for example, "Read More", "See All", or "Expand". ### Show Less Label The text for the collapse link (default: "Show Less"). Only visible when Size Mode is Show More / Less. ### Selectable Text Allow users to long-press and select text for copying (default: off). Turn this on when users might need to copy content like addresses, codes, or reference numbers. Works on Web, iOS, and Android. ## Text Style ### Font Size The size of the text in pixels, 10--36 (default: 16). ### Font Weight The weight of the text (default: Regular). Options: Light, Regular, Medium, Semi Bold, Bold. ### Text Color The color of the text (default: #333333). ### Line Height The spacing between lines in pixels (default: 0 = auto). Set a specific value to control line spacing -- higher values add more space between lines for readability. ### Text Alignment Horizontal alignment of the text (default: Left). Options: Left, Center, Right. ## Appearance ### Background Color The background color of the text box (default: #FFFFFF). ### Padding Inner padding of the text box in pixels, 0--32 (default: 12). ### Border Color The border color of the text box (default: #E0E0E0). ### Border Width Border thickness in pixels, 0--5 (default: 1). ### Border Radius Corner rounding in pixels, 0--24 (default: 8). ### Show More/Less Color The color of the "Show More" and "Show Less" link text (default: your app's primary color). Only visible when Size Mode is Show More / Less. ### Opacity Overall transparency of the component, 0--100 (default: 100). Use lower values for layering effects or watermark-style text. ### Shadow Toggle a subtle drop shadow on the text box (default: off). ## Tips & Best Practices * **Use Fixed mode for long content.** Set the component height in the editor to control how much text is visible, and let users scroll to read more. Great for terms and conditions, privacy policies, or detailed descriptions. * **Use Show More / Less for previews.** Set Max Lines to 2--3 for a compact preview with a tap to expand. This keeps screens clean while still giving access to full content. * **Bind Text to Magic Text** from your database to display dynamic content -- product descriptions, user bios, review text, help articles, etc. * **Turn on Selectable Text** when users might need to copy addresses, phone numbers, order codes, or any reference information. * **Adjust Line Height for readability.** For long-form content, a Line Height of 24--28px (with font size 16) makes text much easier to read. * **Use Expand mode sparingly.** It grows the component to fit all text, which can push other content down the screen unexpectedly. Best for screens where the text length is predictable. * **Set Border Width to 0** and a matching Background Color to make the text box blend seamlessly into your screen layout. ## Example Use Cases * **Product Description:** Fixed mode, Height 150, bind Text to the product's description field. Users scroll to read the full description without taking over the screen. * **Terms and Conditions:** Fixed mode, Height 200, Selectable Text on so users can copy specific clauses. Add a border and light background to visually separate it from the rest of the form. * **Review Preview:** Show More / Less mode, Max Lines 3. Each review shows a 3-line preview with "Read More" to expand. Keeps the review list compact. * **User Bio:** Expand mode, no border, no background. The bio text grows to fit whatever the user wrote, blending into the profile screen. * **Help Article:** Fixed mode, Height 300, Line Height 26 for readability. Pull the article content from your database via Magic Text. * **Notification Detail:** Show More / Less mode, Max Lines 2, Show More Label "See Full Message". Compact preview in a notification list with tap to expand. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/text-container-pro.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.