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

alex.pethick · January 24, 2020, 8:42pm

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

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!
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: https://thrivetriggers.com/version-test/story/linda-johnson-1577801953179x154873043707756540

You can edit it here (this is where the Rich Text Input comes in): https://thrivetriggers.com/version-test/create-story/1577801953179x154873043707756540

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.

funwtp · January 24, 2020, 9:33pm

Hey,

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

alex.pethick · January 24, 2020, 9:34pm

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. https://thrivetriggers.com/version-test/create-story/1577801953179x154873043707756540

Then the output appears on the “story” page. For example: https://thrivetriggers.com/version-test/story/linda-johnson-1577801953179x154873043707756540

funwtp · January 24, 2020, 9:39pm

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 …
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…

alex.pethick · January 24, 2020, 9:47pm

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.

Editor: https://thrivetriggers.com/version-test/create-story/1577801953179x154873043707756540

Bubble “story” design page: https://bubble.io/page?type=page&name=story&id=thrive-triggers&tab=tabs-1

Draft of sample blog post: https://thrivetriggers.com/version-test/story/linda-johnson-1577801953179x154873043707756540

funwtp · January 24, 2020, 9:48pm

funwtp · January 24, 2020, 9:50pm

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

alex.pethick · January 24, 2020, 10:05pm

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)

funwtp · January 24, 2020, 10:05pm

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

Let me see on point 2.

funwtp · January 24, 2020, 10:07pm

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

alex.pethick · January 24, 2020, 10:09pm

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.

funwtp · January 24, 2020, 10:12pm

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.

funwtp · January 24, 2020, 10:15pm

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

alex.pethick · January 24, 2020, 10:18pm

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:

funwtp · January 24, 2020, 10:24pm

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]

alex.pethick · January 24, 2020, 10:29pm

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.