Rich Text Input plugin displaying line breaks inconsistently & unable to select text on page

I’ve created a blog/publishing-like interface and after weeks of development, I have almost everything working apart from two things:

  1. the first 4 parts of the blog post are not selectable (can’t be highlighted) and you cannot click any links within the first 4 questions when you preview the page. Cannot seem to figure this out!

  2. the output of the Rich Text Input onto the “Story” page formats correctly as designed on all my laptop browsers, but appears to be missing most line breaks when viewed on mobile (tried clearing cache)

Here’s an example of one of those posts:

You can edit it here (this is where the Rich Text Input comes in):

I’m also providing access to the app. The most important page in question here is the “story” page, but you can take a look at the database (“Stories” too for the questions/answers.


Could you describe how you created these paragraphs of text? Did you use some rich text editor plugin?

Yes, I used the Rich Text Input plugin from Bubble. I created a WordPress like editor interface here which is where the Rich Text Input plugins are used.

Then the output appears on the “story” page. For example:

  1. Re. not being able to select text - there seems to be some issue with CSS z-index, it is responsible for the order of HTML elements layering. Probably to do with the below point …

  2. I suspect that the difference in the formatting of the paragraphs is something to do with how “blocks” of the plugin you used are positioned …

I cannot really see the details as I get re-directed to sign in as an admin… Is there a chase you could share the details…

OK. Thanks for the reply. You should be able to access some of those pages above, but I also disabled the admin restricted editor interface.


Bubble “story” design page:

Draft of sample blog post:

May me get back to you in about 1-1.5 hours… Just need to finish something.

1 Like

OK based on your feedback I realized that my floating group was set to “beneath the page” and that’s why it wasn’t highlight-able. But, I’m still having the formatting issues (#2)

Do you think you have sorted the not being able to select? - I see, yes.

Let me see on point 2.

When you say “line breaks”, do you mean gap/space between your paragraphs?

Yes, there are supposed to be gaps/spaces. I can create/see those when I edit using the Rich Text Editor or even if I edit using the database directly.

Okay. This is to do with responsiveness settings, i.e. how your boxes behave when the window/screen width changes… You need to play with it… My suggestion would be to add dummy boxes (empty ones) in the gaps so that you have more predictable behaviour.

like this… make sure all of them are edge-to-edge… this may make your life easier :slight_smile:

OK, it’s not the gaps between elements I’m referring to. I’m talking about from what is created within the Rich Text Input (I believe it’s output is bbcode). See here’s how it looks in the ‘editor’ with the Rich Text Input:

And here’s the output on mobile:

And then it’s fine on desktop:

I see…

I am not sure but it could be either due too this bbcode and how that rich text editor formats the resulting HTML… Not sure.

Maybe try another RTE - 🖋 Build your own Rich Text Editor [New Plugin]

I’m thinking it could be a bug @emmanuel

@funwtp I’d like to use yours but I cannot afford that. I was trying to use an existing, free one because this app/business isn’t even launched/functional yet. Rich Text Input should be able to output something as simple as this…I’m not trying to do anything fancy.

1 Like