I have a rich text element that contains formatted code using the triple backtick formatting (```python…).
I am having an issue that this code is not wrapping properly on the front end.
Is there a way to address this?
A couple of questions.
1- are you using the Rich text or Rich text input?
2- could you go on the element in the navigator and show us the various CSS styles that are applied?
For example here I’m on a Rich text element and I can see the text is displayed differently when I play around with the width or padding of the element:
I am using the Rich Text Element. And using the triple back tick markdown code block notation. I tried it with the < code > < / code > notation and it wraps. But the text is coming from an API that uses the markdown version so I can’t manually adjust it.
Here is another example:
And here are the settings
1 Like
Ok, my first recommendation would be to set the width property to auto but I’m guessing you chose a fixed width of 350px because you want nice space on the left and right of the text 
So the other (quick & dirty) solution I can think of is to:
- place the rich text element inside a container
- have 100% width on the rich text element
- and your 350px width on the container
- set a “Scroll” or “Auto” overflow on the container:
I realize this is not ideal in terms of user experience so will investigate further with the tech team…
Can you tell me more about how you used the < code > < / code > notation to make it wrap ? (I’m thinking perhaps we could use a formula to change the backquotes into tags when binding the original markdown to the element)
Yes I think you can do it with javascript, when you bind the variable you can use this snippet :
return myVar.replaceAll("```python", "<code>").replaceAll("```", "</code>")
2 Likes