When text shrinks, the group it is inside of does not!

[rad.dlugowski]

Hi everyone,

I am trying to build a messenger within my app which resizes the text box to the size of the message. My current approach is creating a text box that I think will be large enough for messages (I can only shrink it, but not expand it vertically - if someone knows a trick for that please let me know), checking off “Shrink the element if the text gets shorter” and hoping it collapses. My issue is that other elements in the group aren’t following it. Here is what I get:

My app is fixed width (making a native app) so the responsive tab is completely disabled. Even if it was enabled, I’m pretty sure it only has options for how elements respond to horizontal stretching. Can someone please help me make these elements follow the text box as it shrinks?

[morewebs]

My common approach is to always nest text within a group as group(s) have more native control, especially when dealing with vertical alignment. You can then fiddle with text height both at line-height and pixel level.

[boston85719]

You should use some code. Airdev put something out a long time ago that I learned from

Basically on your page you need an HTML element to store this code:

body {
font-family: “Oswald” !important;
font-size: 16px !important;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 24px;
}

section {
max-width: 450px;
margin: 50px auto;

div {
max-width: 320px;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 24px;
}
}

.clear {clear: both}
.from-me {
position:relative;
padding:5px 10px 10px 10px;
color:#ffffff;
background:#1480A9;
border-radius:15px 0px 15px 15px;
float: right !important;

&:before {
content:“”;
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:24px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}

&:after {
content:“”;
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:28px;
background:white;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
}

}
.from-them {
position:relative;
padding:5px 10px 10px 10px;
background:#f1fafe;
border-radius:0px 15px 15px 15px;
color: #1A2D35;
float: left;

&:before {
content:“”;
position:absolute;
z-index:2;
bottom:-2px;
left:-7px;
height:24px;
border-left:20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}

&:after {
content:“”;
position:absolute;
z-index:3;
bottom:-2px;
left:4px;
width:26px;
height:28px;
background:white;
border-bottom-right-radius: 10px;
-webkit-transform:translate(-30px, -2px);
}
}

::-webkit-scrollbar { width: 0px; height: 0px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background: transparent; } ::-webkit-scrollbar-thumb:active { background: transparent; } ::-webkit-scrollbar-track { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-track:hover { background: transparent; } ::-webkit-scrollbar-track:active { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; }

Then in your messenger screen you should have a group that also contains an HTML element and in that you put this

Then you will have chat bubbles that expand to fit your text like this

I also spent time reviewing some free chat templates to understand how to set things up as well as videos on youtube…with those I was able to create read receipts and other features.

Good luck

[morewebs]

Sorry, forgot to add my canvas… keep things uber simple

[rad.dlugowski]

Could you link me to the videos you watched? I can’t work with this solution, because I’d need to modify it and I do not understand it. The only videos on this I found on YouTube are from Echo Lake Technologies and they do not explain how to create a responsive text bubble.

[boston85719]

This is the video

However, it is not explaining how to use the code it is explaining how to build a messaging system.

For understanding the code, I simply spent enough time researching online and playing around with it to figure it out myself.

This website

https://www.w3schools.com/html/

is what I use to learn about coding for html and CSS to use in my bubble apps

[renangiuseppem]

can someone explain better how to use the code?