calcite-list-item description with Carriage Returns

Dirk_Vandervoort — Fri, 22 Mar 2024 14:28:26 GMT

Greetings.

I have a calcite-list. I would like its child calcite-list-items to have descriptions that include carriage returns. The calcite-list-items are created in JS code:

const item = document.createElement("calcite-list-item"); item.setAttribute("label", "This is the label); item.setAttribute("value", someValue); const theDescription = "First Line \n Second Line" item.setAttribute("description", theDescription); document.getElementById("my-calcite-list").appendChild(item);

The "\n" is not obeyed and the resulting description is "First Line Second Line".

I would like to include carriage returns in the description.

TIA for your help.

Re: calcite-list-item description with Carriage Returns

KittyHurley — Fri, 22 Mar 2024 14:49:57 GMT

@Dirk_Vandervoort You could set the CSS white-space property to "pre-line", to determine how white space is handled inside the element:

https://codepen.io/geospatialem/pen/RwOVKQy

#my-calcite-list-item { white-space: pre-line; }

topic calcite-list-item description with Carriage Returns in Calcite Design System Questions

calcite-list-item description with Carriage Returns

Re: calcite-list-item description with Carriage Returns