Limit amount of lines in multiline input

I’m working on a form which should be printed as a PDF after it’s filled.
I have a multiline input which shouldn’t allow the user to enter more than 3 lines, the example is below:

The issue is that I can’t use the built-in feature of limiting the number of characters, because it will still allow to use ‘Enter’ key and create new line breaks (as the total characters amount will be lesser than the set limit).

I’d really appreciate any suggestions how to solve this issue. :slight_smile:


Does anyone know the solution?

Instead of using a multiline input, can you just create separate one line inputs and then if you really need them in one data field you can combine them after? Would that work?

1 Like

That would be troublesome for the user to type long sentences in (as the linebreak wouldn’t be automatic and they would need to use TAB key to switch to the next line), as well as in case when the input is copy-pasted from external source (which is likely for my app).
I think that separating the multiline input into three different inputs isn’t a viable solution unfortunately. :frowning:

Ok, well you can sort of do a workaround and give them an error message when its more than 3 lines. Also, not allow them to click on a button to save the data unless its less than 3 lines or something like that. Would that work?

I think this is a sort of workaround for you. You can change it to adapt what you need.


Editor: 805testapp42 | Bubble Editor

This example requires 3 lines to save the data. You can even set it up in the workflow conditions to make sure nothing gets saved unless it is 3 lines or less as well. Up to you.

Want to learn more?


Hope that helps! :blush:

1 Like

This workaround looks good, but I found one flaw:

If user inputs a text longer than 3 lines, without manually creating line breaks (using Enter key), the app doesn’t show an error when saving the content like in above picture (save was pushed prior to the screenshot).

I see this is done using Regex. Is there any way to extract any line break, not only \n?

Well, that will change depending on your screen size, is that really what you want? If your user is on a mobile phone they won’t be able to save as much as someone on a desktop. Well, if you input is responsive of course.

The input is not responsive as for now - it might be in the future, but this is not a priority now. The app is targeted towards business users and mostly will be used on desktops.
The point is that after the form is filled, the multiline input is being printed on a template in a specific place, and I need to make sure that the text won’t get past the borders of this designated place (so it simply can’t be too long).

What about using the “cut off content if the element is not tall enough” so it will just cut it off on the template? Then the user can just adjust it if they don’t want it to be cut off?

Or maybe make a limit on how many characters for the whole input as well as the line breaks. Making two conditions just in case.

This sounds reasonable, but the problem is that template is generated using PDFConjurer, it’s not a Bubble page. Currently I’m saving the multiline input contents to the database, and then use the entry as the source for PDFConjurer.
Can you save the cut off content to the database as a text? I guess this would solve the problem.

You can cut off the content to a certain amount of characters. Truncate to: (number of characters) should give you what you want I think.

Not really - I can’t know the maximum number of characters. It should truncate the text after it reaches the 4th line, which is exactly what “cut off content if the element is not tall enough” does with text fields (it replaces all text after the 3rd line with “…”).
I have pictured it below:



So no matter if there are 12 characters with line breaks or many more without the line breaks, I need to save only first 3 lines into the database.
I can hide the text field to be invisible for the user, but how can I save its value to the database?

Maybe you can look here:

Then experiment with different ideas that might work.

Maybe vertical lines or something like that. Hope that helps a little bit. :blush:

Nothing seems to work - only line break it detects is the manual one (\n).

So far the only solution I see is to use the automatically truncated text field (“cut off content if the element is not tall enough”). Is there any way to save its value to the database? I couldn’t find it yet. :frowning:

I think number of characters is the way to go.

Or 3 single line inputs, if they cant see what they are writing after the line is full, they might get the hint.

I can’t think of a way to save it like that since it is just a text element and not an input.

Bubble seems to truncate the text and add … to create the text element cut off:

OK, I guess that only thing I can do is to mix some conditionals with max character number limit and truncating the text before saving to DB, as a some kind of a workaround.
I’ll try to work it out.

If anyone can share any other solution to this issue, it will be more than welcome. :slight_smile:

Thank you guys for your help! :+1:

Same issue here, would like a solution. I’m wondering if its possible to not allow ‘line breaks’? Then we could simply limit characters

It seems there is no solution to stop user from creating the line breaks in multiline input, as this is the main idea of this element. I think you need to use the basic input instead, which doesn’t allow to create line breaks.

1 Like