"Inline" Editing a Text & BBcode formatting in Input Field

Hello there!

I have a task that is shown in a text element. I want the user being able to edit the task by clicking on the text (inline editing).

So how ist this possible? I had the idea of using an input field without background and border as the text element, but this doesn’t seem to be the best solution.


Actually, the solution you mention is probably what I would have done in this case. What’s keeping you from doing it that way?

You could also use a text element that is replaced by an input element when the user clicks on it, but to me it sounds unnecessarily complicated.


My problem is that BBcode is not working in the placeholder field:

Doesn’t matter if I choose initial content or placeholder.

Any idea?


Hmm, ok, I see. Inline editing of BBcode formatted is a little more tricky. Bubble’s rich text editor will do the trick, but youre stuck with the toolbar. Text Editor (bdk) by @gaurav might be a solution, as you can hide the toolbar, but it doesn’t support BBCode yet. Gaurav is looking into it, but I don’t know the current status of it.


The text doesn’t have to be editable when it is checked and strike through. The user can’t format the text by himself (hardcoded BBcode). I just want to do a conditional formatting of the input field content with BBcode.

A solution may be replacing the input field with a strike through text field if the task is checked. Is this even possible?

I also have an super simple solution using an input field and a text field:

  • Input field is visible and editable, if the task is checked it will be hidden and the text that is strike through will be shown

But I am not quite sure how great this performs performance wise.

Any hints?

I doubt that solution will hurt your performance much, sounds like a pretty standard Condition. I wouldn’t hesitate going for that solution.

Thanks for your reply!

This works like charm! Some fonts do have a different letter height when they are strike through, so this didn’t look great with my font (Roboto Regular). I changed the font family and now it is pixel perfect! :slightly_smiling_face:

Glad to hear it :wink:

I’m surprised the letter height changed - Roboto is a professional font, and shouldn’t behave like that.

This topic was automatically closed after 70 days. New replies are no longer allowed.