Multiline input bug?

[Guru]

Hello,

I think there is a bug with multiline input option “stretch to fit content” when this input is used on Popup / Repeating group or group focus when initial content is set.

I use it for “edit” mode of comments but neither pop-up nor group focus solves the problem. Multiline doesn’t fit the content.

Cheers!

[dan1]

Could you post video/screenshots of what you’re seeing and how you have it set up?

[Guru]

Yes, below is the screen from pop-up window used within the reusable element that I use for repeating group row edit mode

Idea is simple - whenever edit button is pressed this popup appears allowing to edit a comment (so I’m feeding the RG data into it as a “Parent’s data”).

So normally this Multiline should fit itself to the comment length but it doesn’t do it. Whether I check or uncheck box there is no difference.

I tried the same scenario with Group Focus but effect is the same.

Additionally when I tried to create “edit mode” within a RG row itself the multiline input bugged out and was covering whole RG instead of expanding height of particular row.

Ofc the key point might be that I’m using this as an element that has initial content so this might be the problem. When I used this as a normal input everything is OK.

[dan1]

I may not be following what your request is, but is it that you want the “gap” (see arrows in the screen shot below) to not be there?

If that’s the case, draw the multiline input so it is only tall enough for one line to start. Then, it will stretch accordingly. (Otherwise, the multiline input will not get “shorter” than the defined (original) height.

[Guru]

I made it a bit bigger just for testing. Below you have some printscreens from the web section of my comments.

Comments:

Short comment edit mode: (looks good)

Long comment edit mode: (doesn’t fit even though stretch to fit is checked)

I’m aware that it will not get shorter but the problem is that it’s not getting bigger when it suppose to

[dan1]

It may be that you have a plugin installed that is conflicting with the defined behaviors in Bubble. (What makes me believe this is the case - your scrollbar looks different than what I would expect the multiline input to look like in Chrome, Safari or Firefox).

Can you try previewing your app in safe mode (no plugins)?

[Guru]

Well I actually don’t use plugin. I have modified it within the head component and some styling.

::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: #0080ff; } ::-webkit-scrollbar-thumb:active { background: #0080ff; } ::-webkit-scrollbar-track { background: #c0c0c0; border: 0px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-track:hover { background: #c0c0c0; } ::-webkit-scrollbar-track:active { background: #c0c0c0; } ::-webkit-scrollbar-corner { background: transparent; } * {outline: none !important;}

Even when I keep the default ones effect is the same:

Safe mode doesn’t change anything neither.

[dan1]

Hmm. Stumped for now… Here’s the last thing that comes to mind.

If you’re using translation, I’ve noticed that text doesn’t always stretch as you might expect (ie. if the source language was English and it covered 4 lines but was then translated to Spanish and covered 5 lines, the text/input will not stretch consistently for the new 5th line.

[Guru]

Well I’m not using translation but your explanation is exactly what I mentioned in the beginning. In my opinion bug with the MultiInput is this:

the key point might be that I’m using this as an element that has initial content so this might be the problem. When I used this as a normal input everything is OK.

So I believe stretch to fit content doesn’t work on text that’s fed to the input differently than manual typing (where everything works nicely).

[dan1]

That gives me one other thing to try.

For the multiline input, have it 1) start by being tall enough for one row of text, 2) have no initial data associated, 3) have the edit button in your repeating group send data to the group, then the multiline input references the parent group’s text.

Then, when the group/popup is closed, have a reset data action for the group (and possibly a reset inputs action).

[Guru]

But I have to use initial content filed on order to use it as “edit mode” You can see on the first printscreen that this is how I set it up initially. ML references Parent’s TEXT Treść = Current Comment Content.