Prismic-rich-text : parapgraphs wrap flex content

Developing with Prismic
1

Hello,
When I use the prismic-rich-text inside a flex div, this div always wraps.
It appears to be due to paragraphs being rendered within prismic-rich-text (example with the vuetify framework):

         <div class="f-flex flex-wrap">
           <div>lorem ipsum...</div>
           <prismic-rich-text:field="document.data.title"/>
         </div>

Do you have a trick so that the prismic-rich-text doesn't wrap the content?

3

Hi @ricou,

Thanks for reaching out.

I'm doing some tests and I will get back to you as soon as possible.

4

Thank you.
I made a mistake when I wrote the code

<div class="d-flex flex-wrap">
         <div>lorem ipsum...</div>
       <prismic-rich-text:field="document.data.title"/>
 </div>
1 Like
5

Hi @ricou,
Thanks for letting us know. Did that fix the issue, or you still need help?

6

No I have still the issue.

1 Like
7

Hi @ricou,

I've done some tests and here is the result I get

Screenshot 2022-05-20 at 17.04.28
Screenshot 2022-05-20 at 17.04.281259×101 14.1 KB

Screenshot 2022-05-20 at 17.04.33

And if you mean that you don't want the structure text field to wrap then you might need to modify the way it functions by Implementing an Html serializer, you can learn more about that using this link

Looking forward to your reply,
Fares

9

Thank you, indeed, I will use a special Html serializer

1 Like