Protobi

Post Editor

← All help posts

View post

You might encounter elements where the title appears blank when the group is compact.

<img src="/uploads/upload/image/5200/direct/1668444360434-1668444360434.png" alt="Survey question "AGE. What is your age?" displaying three blue bars with percentages: unlabeled first option (20%), "30 - 50" (50%), and "50+" (30%). Shows "Compact to: Mean" and "N: 2511" at bottom, with the first age range missing a visible title." style="width: 313px;" class="fr-fic fr-dib">

Typically, this element has a less than sign in the title, which is causing the title to appear blank.

<img src="/uploads/upload/image/5200/direct/1668444464208-1668444464208.png" alt=""More properties: age1" dialog box with blue header and help icon, displaying four fields: key ("age1"), displayKey ("text"), headline ("text"), and title field with blue border containing "< 30" showing the HTML entity encoding for the less-than symbol." style="box-sizing: border-box; border: 0px; max-width: calc(100% - 10px); cursor: pointer; padding: 0px 1px; user-select: none; color: rgb(56, 76, 96); font-family: sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; width: 297px;" class="fr-fic fr-dib">

The greater than and less than signs are special characters in HTML. If we write them as **>** for greater than and **<** for less than then it will not affect the titles in compact groups.

<img src="/uploads/upload/image/5200/direct/1668444564642-1668444564642.png" alt=""More properties: age1" dialog displaying the same four fields as before, but now the title field shows "&lt; 30" with the HTML entity code visible as plain text instead of being rendered as the less-than symbol." style="width: 297px;" class="fr-fic fr-dib">

Result:

<img src="/uploads/upload/image/5200/direct/1668444623131-1668444623131.png" alt="Survey question "AGE. What is your age?" now showing all three age categories with visible labels: "< 30" (20%), "30 - 50" (50%), and "50+" (30%), with blue bars and magenta arrows. "Compact to: Mean" and "N: 2511" displayed at bottom, demonstrating the corrected display with all titles visible." style="width: 313px;" class="fr-fic fr-dib">

Publishing

Date

Status

Slug edit

Content

Thumbnail

Categories Manage

Tools

AI Database

Danger zone